ck:frontend-design

这项技能旨在指导创建独具特色、达到生产级水准的前端界面，避免千篇一律的“AI 垃圾风格”。请编写真正可用的代码，并以非凡的细致程度打磨美学细节、做出创意选择。

重要：必须遵循下方的设计思维、前端美学指南、素材与分析参考以及反模式（AI 垃圾风格）部分。不得跳过这些规则。

工作流选择

根据输入类型选择工作流：

输入	工作流	参考
截图	精确复刻	./references/workflow-screenshot.md
视频	复刻并添加动画	./references/workflow-video.md
截图/视频（仅描述）	为开发者编写文档	./references/workflow-describe.md
3D/WebGL 请求	Three.js 沉浸式体验	./references/workflow-3d.md
快速任务	快速实现	./references/workflow-quick.md
复杂/获奖级作品	全沉浸式体验	./references/workflow-immersive.md
升级现有项目	重新设计审查	./references/redesign-audit-checklist.md
从零开始	使用下方的设计思维	-

所有工作流：首先启用 ck:ui-ux-pro-max 技能以获取设计指导。

**优先级：**当反 AI 垃圾风格规则（下方）与 ck:ui-ux-pro-max 建议（例如 Inter 字体、AI 紫色调色板、仅使用 Lucide 图标）冲突时，除非用户明确要求采用冲突的选项，否则应使用 ./references/anti-slop-rules.md 中的替代方案。

截图/视频复刻（快速参考）

1. 使用 ck:ai-multimodal 技能进行分析——提取颜色、字体、间距和效果
2. 使用 ui-ux-designer 子 Agent 制定计划——创建分阶段实施方案
3. 实现——精确匹配源内容
4. 验证——与原图比较
5. 编写文档——如获批准，更新 ./docs/design-guidelines.md

详细步骤请参阅相应的工作流文件。

设计调节参数

三个用于驱动设计决策的可配置参数。可在会话开始时设定默认值，或让用户通过聊天覆盖：

参数	默认值	范围	低（1-3）	高（8-10）
DESIGN_VARIANCE	8	1-10	完美对称、居中布局、均等网格	非对称、砌体布局、大面积留白、分数单位 CSS Grid
MOTION_INTENSITY	6	1-10	仅 CSS 悬停/激活状态	Framer Motion 滚动显现、弹簧物理效果、持续的微动画
VISUAL_DENSITY	4	1-10	艺术画廊——大面积留白、精致简洁	驾驶舱——极小内边距、1px 分隔线、各处使用等宽数字

**用法：**这些值会驱动具体规则。当 DESIGN_VARIANCE > 4 时，居中式首屏布局会被过度使用——应强制采用分屏或左对齐布局。当 MOTION_INTENSITY > 5 时，嵌入持续运行的微动画。当 VISUAL_DENSITY > 7 时，移除通用卡片，改用间距和分隔线。

有关通过调节参数驱动的 SaaS 仪表板实现，请参阅 ./references/bento-motion-engine.md。

设计思维

在编写代码之前，先确立一个大胆的美学方向：

• 目标：这个界面要解决什么问题？谁会使用它？
• 风格：选择一种极具鲜明特色的风格：极简到极致、繁复狂放、复古未来主义、有机自然、奢华精致、俏皮玩具感、编辑部／杂志风、粗野原始、装饰艺术／几何风、柔和粉彩、工业实用主义等。风格可谓千变万化。可以从这些方向汲取灵感，但最终设计应忠于所选的美学方向。
• 限制条件：技术要求（框架、性能、无障碍性）。
• 差异化：怎样才能令人难忘？别人会记住哪一点？

至关重要：选择明确的概念方向，并精准地贯彻到底。大胆繁复和精致极简都行得通——关键在于用心设计，而非一味追求强烈效果。

然后实现可运行的代码（HTML/CSS/JS、React、Vue 等），并确保它：

• 达到生产级水准且功能完善
• 视觉出众，令人印象深刻
• 风格统一，审美方向鲜明
• 每个细节都经过精心打磨

前端美学指南

重点关注：

• 字体排印：选择美观、独特、有趣的字体。避免使用 Arial 和 Inter 等常见字体，转而选择能提升前端美感、风格鲜明、富有个性的字体。搭配一款有特色的展示字体和一款精致的正文字体。
• 色彩与主题：坚持统一的美学风格。使用 CSS 变量保持一致性。比起犹豫不决、平均分配的配色，大面积主色搭配鲜明点缀色更出彩。
• 动效：运用动画营造效果和微交互。对于 HTML，优先使用纯 CSS 方案；对于 React，有可用的 Motion 库时就使用。重点打造影响力强的时刻：精心编排的一次页面加载动效，配合错落呈现（animation-delay），比零散的微交互更能带来惊喜。加入滚动触发效果和出人意料的悬停状态。
• 空间构图：采用出人意料的布局。不对称、叠放、斜向流动、打破网格的元素都可以。留出充足的负空间，或营造有序的紧凑感。
• 背景与视觉细节：营造氛围与纵深感，不要只用纯色背景。加入契合整体风格的效果与纹理。大胆尝试渐变网格、噪点纹理、几何图案、透明叠层、戏剧化阴影、装饰边框、自定义光标和颗粒叠加层等设计手法。

绝不要使用千篇一律的 AI 生成式美学，例如泛滥的字体（Inter、Roboto、Arial、系统字体）、陈词滥调的配色（尤其是白底紫色渐变）、套路化的布局和组件模式，以及缺乏针对性格调的模板化设计。

发挥创意，做出出人意料、真正为具体场景量身打造的设计。每次设计都应独一无二。在浅色与深色主题、不同字体和不同风格之间灵活切换。绝不要在每次生成时都选用常见方案（例如 Space Grotesk）。

重要：让实现的复杂度与美学构想相匹配。繁复的设计需要精细的代码、大量动画和效果。极简或精致的设计则需要克制、精准，并仔细把握间距、字体排印和细微之处。出色的效果源自对设计构想的出色执行。

**请记住：**Claude 能够创作非凡的作品。不要有所保留，尽情展现跳出框架、全心投入独特构想所能创造的成果。

素材：使用 ck:ai-multimodal 生成图片，使用 ck:media-processing 处理图片

资产与分析参考

任务	参考
生成资产	./references/asset-generation.md
分析质量	./references/visual-analysis-overview.md
提取指南	./references/design-extraction-overview.md
优化	./references/technical-overview.md
动画	./references/animejs.md
Magic UI（80+ 个组件）	./references/magicui-components.md
禁用的反套路模式	./references/anti-slop-rules.md
重新设计审核清单	./references/redesign-audit-checklist.md
高级设计模式	./references/premium-design-patterns.md
性能防护准则	./references/performance-guardrails.md
Bento 动效引擎（SaaS）	./references/bento-motion-engine.md

快速入门：./references/ai-multimodal-overview.md

反模式（AI 垃圾风格）

强烈建议选择替代方案，避免采用这些大模型默认风格。完整规则：./references/anti-slop-rules.md

排版 — 避免使用 Inter/Roboto/Arial。优先选择：支持越南语字符的热门 Google Fonts、Geist、Outfit、Cabinet Grotesk、Satoshi（搜索最合适的字体）

字号 — 输入字段的字号始终要大于 16px，以避免在移动设备上触发缩放。

颜色 — 避免 AI 式紫蓝渐变风格、纯 #000000 和过饱和的强调色。使用中性色为基底，并搭配一种经过审慎挑选的强调色。

布局 — 避免三列等宽的卡片功能区、方差过大的居中主视觉区和 h-screen。使用非对称网格、分屏布局和 min-h-[100dvh]。必须采用移动优先的方法。

内容 — 避免使用“John Doe”“Acme Corp”、整数以及 AI 文案陈词滥调（“Elevate”“Seamless”“Unleash”）。使用真实感强的姓名、自然的数据和朴实具体的语言。

效果 — 避免霓虹/外发光、自定义光标、标题渐变文字（除非有人要求）。使用带色调的内阴影和弹簧物理效果。

组件 — 避免使用默认的无样式 shadcn、仅使用 Lucide 图标，以及高密度的通用卡片边框阴影模式。务必进行自定义，尝试 Phosphor/Heroicons，并通过间距代替卡片。

**快速检查：**交付任何设计前，请查看 ./references/anti-slop-rules.md 中的“AI 特征”清单。

**性能：**动画和模糊规则见 ./references/performance-guardrails.md

请记住：Claude 能够创造出非凡的作品。全力投入，打造独树一帜的设计。