DeepChat 前端设计技能frontend-design实战指南如何让 Agent 做出有辨识度、可生产落地的界面【免费下载链接】deepchatDeepChat - A smart assistant that connects powerful AI to your personal world项目地址: https://gitcode.com/GitHub_Trending/dee/deepchat本篇指南以 DeepChat 开源仓库中内置的frontend-designSkill 文档resources/skills/frontend-design/SKILL.md为核心完整解读其先定设计方向、再写高质量代码的方法论并结合仓库中 Skill 系统的源码与同族技能进行佐证。读完你将掌握如何为组件、页面、海报或完整应用确定一个大胆且自洽的美学方向如何用排版、色彩、动效、空间构成与背景细节做出不像 AI 生成的界面以及该技能在 DeepChat 中是如何被发现、路由和执行生效的。一、这个 Skill 是什么定位与适用场景frontend-design是 DeepChat 内置技能目录resources/skills下的一组能力包之一与其并列的还有 web-artifacts-builder、algorithmic-art、doc-coauthoring 等分别负责前端构建、算法艺术、文档协作等不同领域。每个技能包以SKILL.md为入口清单本技能即 resources/skills/frontend-design/SKILL.md。技能头部Frontmatter给出了它的正式定义--- name: frontend-design description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics. license: Complete terms in LICENSE.txt ---从description可以看出它的适用范围非常明确产物类型Web 组件、页面、Artifact、海报、完整应用网站、落地页、仪表盘、React 组件、HTML/CSS 布局触发时机用户要求构建上述任何界面或者要求对任意 Web UI 进行美化/重新设计核心承诺产出有辨识度、达到生产级水准的前端代码刻意规避千篇一律的AI 味generic AI aesthetics即俗称的 AI slop。该技能与 web-artifacts-builder 互补后者解决用 React Tailwind shadcn/ui 工程化地搭出多组件复杂 Artifact的管线问题初始化 → 开发 → 打包成单 HTML而本技能解决的是这个界面到底应该长什么样、如何让它好看且有记忆点的设计方法论问题。两者组合使用正好覆盖从创意到交付的完整链路。二、核心方法论先做 Design Thinking再写代码技能文档开宗明义在动手写代码之前必须先理解上下文并承诺一个鲜明BOLD的美学方向。它给出了四个必须回答的问题思考维度要回答的问题Purpose目的这个界面解决什么问题使用者是谁Tone基调选择一个极端的风格方向并贯彻到底Constraints约束技术需求框架、性能、可访问性Differentiation差异化什么让这个界面令人难忘用户会记住它的哪一点关于 Tone文档给出了一份风格菜单供参考灵感来源而非穷尽清单brutally minimal粗野极简、maximalist chaos极繁混乱、retro-futuristic复古未来、organic/natural有机自然、luxury/refined奢华精致、playful/toy-like俏皮玩具感、editorial/magazine杂志编辑风、brutalist/raw野兽派粗粝、art deco/geometric装饰艺术几何风、soft/pastel柔和粉彩、industrial/utilitarian工业实用风……并强调了一条关键原则CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.即关键不在于强度而在于意图。极繁与极简都能成立前提是方向清晰、执行精准。选定方向之后产出的代码必须同时满足三点生产级且可用Production-grade and functional视觉上醒目且有记忆点Visually striking and memorable美学观点自洽统一Cohesive with a clear aesthetic point-of-view每个细节都被精心打磨Meticulously refined in every detail。这一先设计、后编码的流程与同仓库中其他设计类技能一脉相承。例如 algorithmic-art/SKILL.md 同样要求先选择明确的美学方向再生成代码而 web-artifacts-builder/SKILL.md 的 Design Style Guidelines 中也特别警告为避免 AI slop避免过度居中的布局、紫色渐变、统一的圆角和 Inter 字体——与本技能反 AI 审美的立场完全一致可以互相印证。三、Frontend Aesthetics Guidelines五个审美发力点技能文档将如何让界面好看拆解为五个可执行的维度下面逐一展开并结合可落地的实现要点进行补充。3.1 Typography排版选择漂亮、独特、有趣的字体避免 Arial、Inter 这类安全牌用一对组合而非单一字体一个有个性的展示字体display font 一个精良的正文字体body font意外、有性格的字体选择能显著拉升整体质感。实践要点展示字体适合用在 H1、Hero 数字、Logo 等记忆点位置正文控制在两到三种字重内避免整页花哨。字体的个性要服务于已选定的 Tone——编辑风配衬线展示字体工业风配等宽/哥特体复古未来配几何无衬线方向比字体本身的新奇度更重要。3.2 Color Theme色彩与主题用CSS 变量--color-*之类的 custom properties统管全站配色保证一致性主色 锐利强调色的组合优于均匀分布的保守配色承诺一个自洽的主题亮色/暗色、暖色/冷色选定后不要摇摆。实践要点一个实用的做法是定义--bg、--fg、--accent、--muted等语义化变量强调色占比控制在 5%~10%用在按钮、链接、关键数据上背景与前景之间保证 WCAG 对比度约束里明确要求考虑 accessibility。3.3 Motion动效用动画实现效果与微交互优先 CSS-only 方案keyframes、transition、animation-delayReact 场景可引入 Motion 库聚焦高冲击时刻一次精心编排的页面加载错峰 staggered reveal靠animation-delay分层带来的愉悦感胜过一堆零散微交互使用滚动触发scroll-triggering与出人意料的 hover 状态。实践要点错峰揭示的核心是编排队列——为同一批元素设置递增的animation-delay: 100ms/200ms/300ms…让入场有节奏hover 状态建议变了什么一眼可见位移、缩放、变色、形状变化选一到两种避免同时堆叠多个效果。3.4 Spatial Composition空间构成出人意料的布局不对称、重叠、对角线流动、打破网格的元素大胆使用负空间或有控制的密度controlled density拒绝万物居中 均匀卡片的模板感。实践要点Grid 与 Flex 都支持破格——让某个元素跨越网格线、让图片与文字重叠margin-top: -X或z-index叠层、用非对称的 12 列分配如 7/5、8/4替代平均分配。负空间不是空白浪费而是让视线聚焦的排版工具。3.5 Backgrounds Visual Details背景与视觉细节用氛围与深度替代纯色背景加入与整体美学匹配的情境化效果与纹理渐变网格gradient meshes、噪点纹理noise textures、几何图案、多层透明、戏剧性阴影、装饰性边框、自定义光标、颗粒叠加grain overlays拒绝白底 圆角卡片的默认模板。实践要点噪点纹理可用内联 SVGfilter或 tiny PNG 平铺实现成本低、质感提升明显多层透明可组合background的多层渐变装饰性边框适合复古、装饰艺术方向自定义光标适合玩趣/实验性界面。所有细节都应服务于既定 Tone而不是随手堆砌。四、红线清单什么是一定要避免的AI 味技能文档给出了明确的负面清单——NEVER使用这类通用 AI 生成审美维度必须避免的默认项字体Inter、Roboto、Arial、系统默认字体等被过度使用的字体族配色陈词滥调的色彩方案尤其是白底 紫色渐变布局可预测的布局与千篇一律的组件模式整体缺乏情境特征的饼干模具式设计cookie-cutter design同时还有两条行为准则创造性地解读需求做出真正为当前情境设计的意外选择——没有任何两个设计应该雷同在明暗主题、字体、美学风格之间主动变化绝不在多轮生成中收敛到常见选项例如Space Grotesk这类被用滥的字体。技能文档还点明了复杂度与愿景的匹配原则IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.即极繁设计需要足够复杂的代码支撑大量动画与特效极简/精致设计则需要克制、精准以及对间距、排版、微妙细节的严苛把控。优雅来自对愿景的完整执行而非元素的多少。五、如何在 DeepChat 中使用该技能Skill 系统的落地机制本技能不是独立工具而是 DeepChat Skill 体系中的一员。理解它的生效方式有助于正确使用。5.1 SKILL.md 的发现与解析技能入口 resources/skills/frontend-design/SKILL.md 采用了 YAML Frontmatter Markdown 正文的标准格式。在 DeepChat 主进程中技能系统通过 src/main/skill/frontmatter.ts 使用gray-matter解析这段头部并显式禁用 JavaScript Frontmatter 引擎再由 src/main/skill/discoveryWorker.ts 在工作线程中扫描技能目录逐个读取SKILL.md文件若缺少必需的 Frontmatter 字段如name、description会被标记为invalid-frontmatter并给出告警。5.2 从目录到上下文description 的语义作用前端设计技能能被按需唤起依赖的是头部description字段。DeepChat 的技能路由模块 src/main/skill/routingCatalog.ts 会把每个技能的name与description投影为一张路由卡片SkillRoutingCard字段包括name、summary、category、platforms、sessionActive再在上下文预算内渲染成available_skills目录供模型选择当模型需要构建 Web 界面时正是通过这条 description 判断是否调用frontend-design。同时该模块还提供了基于名称、别名aliases/keywords/tags、分类、摘要的检索排序scoreSearchRecord以及带 HMAC 签名的分页游标skill_list确保技能在长会话中依然可以被准确发现。5.3 内置技能如何进入运行时在主进程的 src/main/skill/index.ts 中SkillService负责技能生命周期启动时执行installBuiltinSkills()安装内置技能随后在工作线程中发现技能目录、维护元数据缓存与内容缓存元数据常驻内存、全文按需加载并通过文件监听实现热更新同一名称出现重复时保留首个条目并告警。整个实现对应文档注释中列出的职责从~/.deepchat/skills/发现并解析SKILL.md、渐进式加载、热重载、按会话管理激活状态、多来源安装/卸载。技能目录路径可通过设置项覆盖默认回退到~/.deepchat/skills。换言之仓库内置的frontend-design技能在首次启动时即被安装进技能库之后每次帮我把这个页面做得更好看的请求都会经路由目录匹配到它并由模型依据本文介绍的方法论产出代码。六、将方法论落到代码一个最小实践框架结合 3~4 节的原则这里给出一个可复制的落地框架以纯 HTML/CSS 为例与技能文档优先 CSS-only 方案的建议一致!-- 1. Design Thinking选定 Tone 后把决策写进 CSS 变量 -- style :root { /* 方向示例editorial/magazine —— 杂志编辑风 */ --bg: #f4f1ea; /* 米白纸感背景替代纯白 */ --ink: #1a1a1a; /* 墨色前景 */ --accent: #c22f1d; /* 一个锐利的强调色占比 5%~10% */ --muted: rgba(26, 26, 26, 0.6); --serif: Playfair Display, Georgia, serif; /* 有个性的展示字体 */ --sans: Source Sans 3, system-ui, sans-serif; /* 精良的正文字体 */ } /* 2. 氛围背景噪点纹理 渐变网格避免纯色 */ body { background-color: var(--bg); background-image: linear-gradient(rgba(0,0,0,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px); background-size: 48px 48px; /* 几何网格 */ } /* 3. 错峰揭示animation-delay 编排入场节奏 */ .reveal { opacity: 0; animation: rise .6s ease forwards; } .reveal:nth-child(1) { animation-delay: 100ms; } .reveal:nth-child(2) { animation-delay: 200ms; } .reveal:nth-child(3) { animation-delay: 300ms; } keyframes rise { to { opacity: 1; transform: translateY(0); } } /* 4. 破格布局不对称 重叠 */ .hero { display: grid; grid-template-columns: 7fr 5fr; gap: 2rem; } .hero__img { margin-top: -3rem; } /* 与标题区重叠制造层次 */ /* 5. 出人意料的 hover 状态 */ .card { transition: transform .25s ease, box-shadow .25s ease; } .card:hover { transform: translateY(-4px) rotate(-0.5deg); box-shadow: 0 12px 32px rgba(0,0,0,.12); } /style这个骨架演示了五个审美维度的同时落地变量统一主题、网格纹理营造氛围、animation-delay做错峰入场、非对称列与负 margin 打破网格、hover 位移/旋转制造惊喜——全部为 CSS 原生实现无需任何框架依赖。七、进阶建议与同族技能组合使用需要工程化复杂 Artifact多组件、路由、状态管理与 web-artifacts-builder 组合——先按本文方法论确定视觉方向再用scripts/init-artifact.sh初始化 React Tailwind shadcn/ui 工程最后用scripts/bundle-artifact.sh打包为单 HTML。需要海报、信息图等视觉密集产出可参考 infographic-syntax-creator 的语法约束将复杂信息结构化后再套用本文的色彩/排版原则。代码质量把关配合仓库内的 code-review 技能在生成后做一次可访问性与实现质量复查。八、结语frontend-design技能的价值在于把设计感从玄学变成可执行的检查清单先回答目的、基调、约束与差异化四个问题选一个方向并贯彻到底再在排版、色彩、动效、空间、背景五个维度上做到位最后避开字体、配色、布局三方面的AI 默认项。结合 DeepChat 的 Skill 路由与生命周期机制这套方法论可以在每次界面构建请求中稳定生效。记住技能文档最后一句话的精神不要克制创意把愿景完整执行出来。参考文件索引技能正文resources/skills/frontend-design/SKILL.md含 Apache 2.0 许可说明见同目录 LICENSE.txt技能目录全貌resources/skills前端工程化配套技能resources/skills/web-artifacts-builder/SKILL.mdFrontmatter 解析src/main/skill/frontmatter.ts技能发现与校验src/main/skill/discoveryWorker.ts技能生命周期管理src/main/skill/index.ts技能路由目录与检索src/main/skill/routingCatalog.ts【免费下载链接】deepchatDeepChat - A smart assistant that connects powerful AI to your personal world项目地址: https://gitcode.com/GitHub_Trending/dee/deepchat创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
DeepChat 前端设计技能frontend-design实战指南如何让 Agent 做出有辨识度、可生产落地的界面【免费下载链接】deepchatDeepChat - A smart assistant that connects powerful AI to your personal world项目地址: https://gitcode.com/GitHub_Trending/dee/deepchat本篇指南以 DeepChat 开源仓库中内置的frontend-designSkill 文档resources/skills/frontend-design/SKILL.md为核心完整解读其先定设计方向、再写高质量代码的方法论并结合仓库中 Skill 系统的源码与同族技能进行佐证。读完你将掌握如何为组件、页面、海报或完整应用确定一个大胆且自洽的美学方向如何用排版、色彩、动效、空间构成与背景细节做出不像 AI 生成的界面以及该技能在 DeepChat 中是如何被发现、路由和执行生效的。一、这个 Skill 是什么定位与适用场景frontend-design是 DeepChat 内置技能目录resources/skills下的一组能力包之一与其并列的还有 web-artifacts-builder、algorithmic-art、doc-coauthoring 等分别负责前端构建、算法艺术、文档协作等不同领域。每个技能包以SKILL.md为入口清单本技能即 resources/skills/frontend-design/SKILL.md。技能头部Frontmatter给出了它的正式定义--- name: frontend-design description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics. license: Complete terms in LICENSE.txt ---从description可以看出它的适用范围非常明确产物类型Web 组件、页面、Artifact、海报、完整应用网站、落地页、仪表盘、React 组件、HTML/CSS 布局触发时机用户要求构建上述任何界面或者要求对任意 Web UI 进行美化/重新设计核心承诺产出有辨识度、达到生产级水准的前端代码刻意规避千篇一律的AI 味generic AI aesthetics即俗称的 AI slop。该技能与 web-artifacts-builder 互补后者解决用 React Tailwind shadcn/ui 工程化地搭出多组件复杂 Artifact的管线问题初始化 → 开发 → 打包成单 HTML而本技能解决的是这个界面到底应该长什么样、如何让它好看且有记忆点的设计方法论问题。两者组合使用正好覆盖从创意到交付的完整链路。二、核心方法论先做 Design Thinking再写代码技能文档开宗明义在动手写代码之前必须先理解上下文并承诺一个鲜明BOLD的美学方向。它给出了四个必须回答的问题思考维度要回答的问题Purpose目的这个界面解决什么问题使用者是谁Tone基调选择一个极端的风格方向并贯彻到底Constraints约束技术需求框架、性能、可访问性Differentiation差异化什么让这个界面令人难忘用户会记住它的哪一点关于 Tone文档给出了一份风格菜单供参考灵感来源而非穷尽清单brutally minimal粗野极简、maximalist chaos极繁混乱、retro-futuristic复古未来、organic/natural有机自然、luxury/refined奢华精致、playful/toy-like俏皮玩具感、editorial/magazine杂志编辑风、brutalist/raw野兽派粗粝、art deco/geometric装饰艺术几何风、soft/pastel柔和粉彩、industrial/utilitarian工业实用风……并强调了一条关键原则CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.即关键不在于强度而在于意图。极繁与极简都能成立前提是方向清晰、执行精准。选定方向之后产出的代码必须同时满足三点生产级且可用Production-grade and functional视觉上醒目且有记忆点Visually striking and memorable美学观点自洽统一Cohesive with a clear aesthetic point-of-view每个细节都被精心打磨Meticulously refined in every detail。这一先设计、后编码的流程与同仓库中其他设计类技能一脉相承。例如 algorithmic-art/SKILL.md 同样要求先选择明确的美学方向再生成代码而 web-artifacts-builder/SKILL.md 的 Design Style Guidelines 中也特别警告为避免 AI slop避免过度居中的布局、紫色渐变、统一的圆角和 Inter 字体——与本技能反 AI 审美的立场完全一致可以互相印证。三、Frontend Aesthetics Guidelines五个审美发力点技能文档将如何让界面好看拆解为五个可执行的维度下面逐一展开并结合可落地的实现要点进行补充。3.1 Typography排版选择漂亮、独特、有趣的字体避免 Arial、Inter 这类安全牌用一对组合而非单一字体一个有个性的展示字体display font 一个精良的正文字体body font意外、有性格的字体选择能显著拉升整体质感。实践要点展示字体适合用在 H1、Hero 数字、Logo 等记忆点位置正文控制在两到三种字重内避免整页花哨。字体的个性要服务于已选定的 Tone——编辑风配衬线展示字体工业风配等宽/哥特体复古未来配几何无衬线方向比字体本身的新奇度更重要。3.2 Color Theme色彩与主题用CSS 变量--color-*之类的 custom properties统管全站配色保证一致性主色 锐利强调色的组合优于均匀分布的保守配色承诺一个自洽的主题亮色/暗色、暖色/冷色选定后不要摇摆。实践要点一个实用的做法是定义--bg、--fg、--accent、--muted等语义化变量强调色占比控制在 5%~10%用在按钮、链接、关键数据上背景与前景之间保证 WCAG 对比度约束里明确要求考虑 accessibility。3.3 Motion动效用动画实现效果与微交互优先 CSS-only 方案keyframes、transition、animation-delayReact 场景可引入 Motion 库聚焦高冲击时刻一次精心编排的页面加载错峰 staggered reveal靠animation-delay分层带来的愉悦感胜过一堆零散微交互使用滚动触发scroll-triggering与出人意料的 hover 状态。实践要点错峰揭示的核心是编排队列——为同一批元素设置递增的animation-delay: 100ms/200ms/300ms…让入场有节奏hover 状态建议变了什么一眼可见位移、缩放、变色、形状变化选一到两种避免同时堆叠多个效果。3.4 Spatial Composition空间构成出人意料的布局不对称、重叠、对角线流动、打破网格的元素大胆使用负空间或有控制的密度controlled density拒绝万物居中 均匀卡片的模板感。实践要点Grid 与 Flex 都支持破格——让某个元素跨越网格线、让图片与文字重叠margin-top: -X或z-index叠层、用非对称的 12 列分配如 7/5、8/4替代平均分配。负空间不是空白浪费而是让视线聚焦的排版工具。3.5 Backgrounds Visual Details背景与视觉细节用氛围与深度替代纯色背景加入与整体美学匹配的情境化效果与纹理渐变网格gradient meshes、噪点纹理noise textures、几何图案、多层透明、戏剧性阴影、装饰性边框、自定义光标、颗粒叠加grain overlays拒绝白底 圆角卡片的默认模板。实践要点噪点纹理可用内联 SVGfilter或 tiny PNG 平铺实现成本低、质感提升明显多层透明可组合background的多层渐变装饰性边框适合复古、装饰艺术方向自定义光标适合玩趣/实验性界面。所有细节都应服务于既定 Tone而不是随手堆砌。四、红线清单什么是一定要避免的AI 味技能文档给出了明确的负面清单——NEVER使用这类通用 AI 生成审美维度必须避免的默认项字体Inter、Roboto、Arial、系统默认字体等被过度使用的字体族配色陈词滥调的色彩方案尤其是白底 紫色渐变布局可预测的布局与千篇一律的组件模式整体缺乏情境特征的饼干模具式设计cookie-cutter design同时还有两条行为准则创造性地解读需求做出真正为当前情境设计的意外选择——没有任何两个设计应该雷同在明暗主题、字体、美学风格之间主动变化绝不在多轮生成中收敛到常见选项例如Space Grotesk这类被用滥的字体。技能文档还点明了复杂度与愿景的匹配原则IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.即极繁设计需要足够复杂的代码支撑大量动画与特效极简/精致设计则需要克制、精准以及对间距、排版、微妙细节的严苛把控。优雅来自对愿景的完整执行而非元素的多少。五、如何在 DeepChat 中使用该技能Skill 系统的落地机制本技能不是独立工具而是 DeepChat Skill 体系中的一员。理解它的生效方式有助于正确使用。5.1 SKILL.md 的发现与解析技能入口 resources/skills/frontend-design/SKILL.md 采用了 YAML Frontmatter Markdown 正文的标准格式。在 DeepChat 主进程中技能系统通过 src/main/skill/frontmatter.ts 使用gray-matter解析这段头部并显式禁用 JavaScript Frontmatter 引擎再由 src/main/skill/discoveryWorker.ts 在工作线程中扫描技能目录逐个读取SKILL.md文件若缺少必需的 Frontmatter 字段如name、description会被标记为invalid-frontmatter并给出告警。5.2 从目录到上下文description 的语义作用前端设计技能能被按需唤起依赖的是头部description字段。DeepChat 的技能路由模块 src/main/skill/routingCatalog.ts 会把每个技能的name与description投影为一张路由卡片SkillRoutingCard字段包括name、summary、category、platforms、sessionActive再在上下文预算内渲染成available_skills目录供模型选择当模型需要构建 Web 界面时正是通过这条 description 判断是否调用frontend-design。同时该模块还提供了基于名称、别名aliases/keywords/tags、分类、摘要的检索排序scoreSearchRecord以及带 HMAC 签名的分页游标skill_list确保技能在长会话中依然可以被准确发现。5.3 内置技能如何进入运行时在主进程的 src/main/skill/index.ts 中SkillService负责技能生命周期启动时执行installBuiltinSkills()安装内置技能随后在工作线程中发现技能目录、维护元数据缓存与内容缓存元数据常驻内存、全文按需加载并通过文件监听实现热更新同一名称出现重复时保留首个条目并告警。整个实现对应文档注释中列出的职责从~/.deepchat/skills/发现并解析SKILL.md、渐进式加载、热重载、按会话管理激活状态、多来源安装/卸载。技能目录路径可通过设置项覆盖默认回退到~/.deepchat/skills。换言之仓库内置的frontend-design技能在首次启动时即被安装进技能库之后每次帮我把这个页面做得更好看的请求都会经路由目录匹配到它并由模型依据本文介绍的方法论产出代码。六、将方法论落到代码一个最小实践框架结合 3~4 节的原则这里给出一个可复制的落地框架以纯 HTML/CSS 为例与技能文档优先 CSS-only 方案的建议一致!-- 1. Design Thinking选定 Tone 后把决策写进 CSS 变量 -- style :root { /* 方向示例editorial/magazine —— 杂志编辑风 */ --bg: #f4f1ea; /* 米白纸感背景替代纯白 */ --ink: #1a1a1a; /* 墨色前景 */ --accent: #c22f1d; /* 一个锐利的强调色占比 5%~10% */ --muted: rgba(26, 26, 26, 0.6); --serif: Playfair Display, Georgia, serif; /* 有个性的展示字体 */ --sans: Source Sans 3, system-ui, sans-serif; /* 精良的正文字体 */ } /* 2. 氛围背景噪点纹理 渐变网格避免纯色 */ body { background-color: var(--bg); background-image: linear-gradient(rgba(0,0,0,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px); background-size: 48px 48px; /* 几何网格 */ } /* 3. 错峰揭示animation-delay 编排入场节奏 */ .reveal { opacity: 0; animation: rise .6s ease forwards; } .reveal:nth-child(1) { animation-delay: 100ms; } .reveal:nth-child(2) { animation-delay: 200ms; } .reveal:nth-child(3) { animation-delay: 300ms; } keyframes rise { to { opacity: 1; transform: translateY(0); } } /* 4. 破格布局不对称 重叠 */ .hero { display: grid; grid-template-columns: 7fr 5fr; gap: 2rem; } .hero__img { margin-top: -3rem; } /* 与标题区重叠制造层次 */ /* 5. 出人意料的 hover 状态 */ .card { transition: transform .25s ease, box-shadow .25s ease; } .card:hover { transform: translateY(-4px) rotate(-0.5deg); box-shadow: 0 12px 32px rgba(0,0,0,.12); } /style这个骨架演示了五个审美维度的同时落地变量统一主题、网格纹理营造氛围、animation-delay做错峰入场、非对称列与负 margin 打破网格、hover 位移/旋转制造惊喜——全部为 CSS 原生实现无需任何框架依赖。七、进阶建议与同族技能组合使用需要工程化复杂 Artifact多组件、路由、状态管理与 web-artifacts-builder 组合——先按本文方法论确定视觉方向再用scripts/init-artifact.sh初始化 React Tailwind shadcn/ui 工程最后用scripts/bundle-artifact.sh打包为单 HTML。需要海报、信息图等视觉密集产出可参考 infographic-syntax-creator 的语法约束将复杂信息结构化后再套用本文的色彩/排版原则。代码质量把关配合仓库内的 code-review 技能在生成后做一次可访问性与实现质量复查。八、结语frontend-design技能的价值在于把设计感从玄学变成可执行的检查清单先回答目的、基调、约束与差异化四个问题选一个方向并贯彻到底再在排版、色彩、动效、空间、背景五个维度上做到位最后避开字体、配色、布局三方面的AI 默认项。结合 DeepChat 的 Skill 路由与生命周期机制这套方法论可以在每次界面构建请求中稳定生效。记住技能文档最后一句话的精神不要克制创意把愿景完整执行出来。参考文件索引技能正文resources/skills/frontend-design/SKILL.md含 Apache 2.0 许可说明见同目录 LICENSE.txt技能目录全貌resources/skills前端工程化配套技能resources/skills/web-artifacts-builder/SKILL.mdFrontmatter 解析src/main/skill/frontmatter.ts技能发现与校验src/main/skill/discoveryWorker.ts技能生命周期管理src/main/skill/index.ts技能路由目录与检索src/main/skill/routingCatalog.ts【免费下载链接】deepchatDeepChat - A smart assistant that connects powerful AI to your personal world项目地址: https://gitcode.com/GitHub_Trending/dee/deepchat创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
/LR分析实战)
