生成的UI总差点意思design-dna视觉精修迭代的实战方法与提示词技巧【免费下载链接】design-dnaTurn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visual effects—then generate matching UI from your content.项目地址: https://gitcode.com/gh_mirrors/de/design-dna用 design-dna 把参考 UI 变成量化设计 DNA后为什么第一次生成的页面总差点意思问题往往不在配色而在质感、节奏和动效这些说不清道不明的细节。本文给你一套可复制的视觉精修迭代方法一轮一轮对照参考找差距用精准的提示词把草稿打磨成参考级成品全程无需从零重做。先看懂 design-dna 的三阶段工作流design-dna 是一个面向 AI 编程智能体的技能Agent Skill核心能力是三件事阶段做什么产物Structure 结构展示完整的设计画像 schema 与字段含义三维度字段清单Analyze 分析从截图、图片或 URL 提取设计特征字段齐全的 Design DNA JSONGenerate 生成拿 DNA JSON 你的内容落地实现自包含的 HTML/CSS/JS 页面它把设计拆成三个维度恰好覆盖了新手最容易忽略的部分design_system 设计系统——可度量的 token色彩、字阶、间距、圆角、阴影、动效曲线design_style 设计风格——定性感受情绪气质、留白哲学、构图方式、品牌语气visual_effects 视觉特效——超出普通 CSS 的部分粒子、3D、着色器、滚动动效、玻璃拟态等上图是项目内置的风格迁移示例左侧是参考站点的原始设计右侧是用提取出的 Design DNA 应用到 Deno 自家内容后的效果。安装只需要一条命令需已装 Node.jsnpx skills add zanwei/design-dna技能说明详见 SKILL.md中文介绍见 README.zh-CN.md。为什么第一轮生成的 UI 总差点意思把两轮产出并排看差距通常不在大面上而藏在细节里常见差距表现属于哪个维度层级扁平标题不够压得住场重点不突出design_style 构图点缀缺失参考有纹理、渐变光晕、装饰元素产出是光板design_style 视觉语言字阶机械字号是合理的但没有节奏感design_system 字体动效死板只有默认淡入没有缓动性格design_system 动效特效缺席参考的粒子/滚动效果完全没做visual_effects根因只有一个视觉分析是一次采样而质感来自多轮逼近。第一轮生成时模型从参考里抓的是主导特征能抓住 80%剩下 20% 的细节——材质、点缀、动效编排——需要在生成之后对照参考反复审计才能补齐。这正是 design-dna 官方案例中提到的做法第一轮得到能用的草稿再发起专门的精修轮次把差距收拢到参考级。视觉精修迭代的完整方法项目 README 里给了一段官方提示Refining visual richness当首轮产出相对参考仍显单薄时重新附上同一批 URL 或截图发起一次明确的精修轮次。方法分四步第一步保留初稿明确对照精修不要说再优化一下。要让智能体清楚这是审计任务对照的是参考改的是现有实现不是重新生成。第二步重新附上同一批参考关键点用的是最初那批URL 或截图而不是换成新参考。这保证精修方向不变、不跑偏。第三步给出结构化的审计清单官方提示词覆盖六个审计对象界面层级hierarchy点缀与装饰ornamentation字阶与留白节奏typographic rhythm动效motion材质感materiality整体 UIoverall UI并要求把结论合并回当前实现——这句指令决定了精修结果是增量修改而非推倒重来。第四步逐维度收口如果一轮后仍有差距按维度拆开做局部精修。对照 references/schema.md 的字段清单把抽象的差点意思翻译成具体字段差距描述对应 DNA 字段标题不够大不够粗typography.type_scale.display留白不够松弛visual_language.whitespace_usage光效太弱overview.effect_intensity按钮质感不对components.button_style生成端遵循的优先级也写在 references/generation-guide.md 里色彩与字体占 80% 视觉识别度其次是间距版式、形状阴影最后才是特效与动效。精修时可以按这个顺序逐项验收。一份可以直接抄的提示词模板官方原版英文在 README.md 中Against the reference, audit hierarchy, ornamentation, typographic rhythm, motion, materiality, and overall UI—then merge your conclusions back into the current implementation.中文版README 中文版的官方译文请对照参考复审界面层级与点缀、字阶与留白、动效与材质及整体 UI并将结论回填至当前实现。实战中可以在模板上加料效果更稳请对照参考附件截图对当前实现做一轮视觉精修 1. 逐项审计界面层级、点缀装饰、字阶节奏、留白、 动效编排、材质质感 2. 列出每处与参考的差距具体到组件 3. 将结论合并回当前实现保留整体结构不动 4. 本轮只改视觉不改文案与功能。几个小技巧说合并回当前实现防止智能体另起炉灶限定改动范围如本轮只处理动效与点缀避免一次改太多导致失控要求先列差距再动手审计结论可见你才能判断精修是否到位附原始参考不附新参考保证精修锚点一致。迭代节奏几轮合适何时收手轮次目标检查重点第 1 轮补全局质感层级、留白、字体节奏第 2 轮补特效与动效粒子/滚动/悬停动效是否按规格实现第 3 轮局部打磨按钮、卡片、分割线等细节组件一般 2~3 轮即可到达参考级观感。收手标准建议用项目自带的质检清单references/generation-guide.md 的 Quality Checks逐项过所有颜色能追溯回 DNA 色板字族、间距、圆角与 DNA 规格一致整体情绪符合design_style.aesthetic.mood特效与visual_effects规格一致且降级方案fallback已实现prefers-reduced-motion已被尊重如果对照质检清单全部通过再精修下去边际收益就很小了可以收工。把 DNA JSON 存下来精修成本一次投入长期复用精修迭代的前提是有一份可靠的 DNA JSON。它值得被当资产管理入库版本控制DNA JSON 是纯文本可直接提交仓库、随项目演进跨项目复用同一份 DNA 可以给官网、落地页、活动页反复套用持续迭代精修轮次中新确认的结论如圆角再大一点留白再松一点回填到 JSON 里下一轮生成直接受益流程上看README 中的流程图示意参考设计 →分析→ Design DNA JSON →生成→ 成品 UI而 DNA JSON 还有一个旁支保存 · 复用 · 版本管理。精修本质上就是在给这条旁支做增量维护。常见问题 FAQQ1精修时可以把参考换掉吗不建议。换参考等于换锚点之前积累的结论全部失效。要换风格就重新走一遍分析 → 生成。Q2一轮精修改了太多地方怎么控制在提示词里限定范围例如本轮只处理动效并要求保留整体结构不动。Q3只想要精修不想重新生成可以吗可以。技能各阶段可单独使用把初稿 DNA JSON 同一批参考交给智能体明确说对照参考做视觉精修并合并回当前实现即可。Q4支持哪些智能体design-dna 遵循 Agent Skills 规范可通过skillsCLI 安装到 Cursor、Claude Code、Codex、GitHub Copilot 等 40 款支持的智能体命令示例npx skills add zanwei/design-dna -a cursor -g -y。小结design-dna 的价值不在一次生成而在可迭代的生成第一轮参考 UI → 量化 DNA JSON → 生成草稿精修轮同一批参考 审计清单式提示词 → 增量合并回当前实现收口用内置 Quality Checks 清单验收2~3 轮到达参考级观感沉淀DNA JSON 入库、复用、持续回填结论把照着那个网站做从一句口头描述变成一份可审计、可复用、可迭代的规格——这就是 design-dna 视觉精修迭代的核心思路。【免费下载链接】design-dnaTurn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visual effects—then generate matching UI from your content.项目地址: https://gitcode.com/gh_mirrors/de/design-dna创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考