社区案例

极简开发者个人作品集主页

为软件工程师作品集设计系统生成一个简洁的网格化个人网站主页原型。

λL-D1 | AI for Buzzer 🍉 · 2026-05-04 · 约 5 分钟

参考效果：极简开发者个人作品集主页 — 社区作者发布的参考画面 · λL-D1 | AI for Buzzer 🍉

编辑提示词

完整提示词

{"type":"极简个人作品集网站主页设计草图的桌面浏览器截图","style":"瑞士网格系统，粗野主义极简风格，黑白配色，带有淡淡的技术蓝图参考线，细灰色边框，大量留白，等宽字体微标签与粗体几何无衬线标题字体的混合排版","canvas":{"aspect_ratio":"宽屏 16:9","environment":"显示在类似 Chrome 的浏览器窗口内，地址为 localhost:5173，包含可见的标签页、书签栏和地址栏","background":"白色"},"brand":{"logo":"带有首字母 NRS 的小型方形轮廓标记","name":"{argument name=\"character name\" default=\"Naufaldi Rafif S.\"}"},"header":{"position":"位于浏览器界面下方的顶部固定网站导航栏","height":"约 64px","left_brand":"NRS logo 后接 Naufaldi Rafif S.","navigation":{"count":6,"items":["首页","博客","项目","关于","演讲","其他（带向下箭头）"],"active_item":"首页（位于细轮廓矩形标签中）"},"actions":{"count":3,"items":["联系（白色轮廓按钮）","下载简历（黑色实心按钮，带箭头）","小型方形太阳/主题图标按钮"]}},"layout":{"main_container":"大型居中矩形网格区域，带有淡淡的垂直和水平参考线、坐标标签及细边框","technical_annotations":{"count":7,"labels":["X-1440","X-768","X-0","X-1024","X-768","X-480","Y-0 / Y-360 / Y-720 参考标记"]},"sections":[{"title":"01 // 简介","position":"左侧大型内容栏","count":1,"content":"巨大的盒状标题，显示 {argument name=\"headline text\" default=\"NAUFALDI RAFIF S.\"}，分为两行，黑色全大写超粗字体"},{"title":"职业总结","position":"标题下方左侧栏","count":3,"items":["副标题：{argument name=\"role title\" default=\"软件工程师 & 导师\"}","专业标签：产品系统 | 后端基础 | 工程指导","段落：{argument name=\"bio paragraph\" default=\"我的基础是前端，但方向更广：后端所有权、产品架构和端到端软件交付。\"}"]},{"title":"02 // 路径","position":"由垂直分隔符隔开的右侧边栏","count":3,"items":["01 查看项目，黑色激活卡片，带代码图标和右箭头","02 取得联系，白色行，带右箭头","03 下载简历，白色行，带右箭头"]},{"title":"底部状态栏","position":"带边框容器的底部","count":4,"items":["寻求机会","7 年经验","1000+ 学员","印尼贝卡西"]}],"footer_meta":"底部状态栏右侧显示 BUILD:2026 和 PRD:01"},"typography":{"headline":"巨大的大写粗体无衬线字体，紧凑间距","body":"简洁易读的无衬线字体","microcopy":"带有宽字间距的小型大写等宽字体"},"color_palette":{"primary":"#0b0d0e 近黑色","background":"#ffffff","border":"#e8e8e8 浅灰色","guides":"#edf2ef 极淡的绿灰色","accent":"激活路径卡片和顶部网格参考线上的细绿线"},"composition_notes":"使其看起来像是一个为实现而生成的精美网页设计系统原型，而非营销落地页；强调精确的对齐、网格覆盖层、坐标标签以及现代开发者作品集的审美。"}

带入创作工作台

仅带入描述，不会自动生成。参考图与编辑模式请先上传或选中原图。

来源与说明

由 λL-D1 | AI for Buzzer 🍉 发布，经 YouMind 收录。提示词与图片权利归原作者及相应平台。

此案例需要参考图片，请在创作工作台中上传后再使用。

查看原始来源 ↗ · 作者主页

使用示例 →

把这个思路，变成下一次创作。

在 RonasAI 中开始创作 ↗