我狠心改造了前端设计能力，现在我的 UI 不再有 AI 味

我残酷地改造了我的前端设计技能 ~ 现在我的 UI 不再像 AI 垃圾了 July 14, 2026 · 6 min read · View source ↗ AI Claude Automation Marketing 要创建一个自定义的 Claude skill，请在你的 Claude 界面里前往 Customize > Skills，点击 + 按钮，然后选择 + Create skill Prompts Frontend Design Skill 创建具有辨识度、生产级的前端界面，让人感觉出自一位强有力的真人设计师之手，而不是从模板模式里平均出来的东西。 成功标准 具备清晰叙事与标志性元素的独特视觉识别 生产级的功能完整性，包含完整的各种状态与响应式行为 默认无障碍，符合 WCAG AA 意图 由 token 驱动的设计系统，而非一次性样式 零依赖任何可识别的 AI 套路 写代码之前 1. 理解上下文 目的 这个界面解决什么问题，谁来使用它 约束 框架、性能预算、无障碍需求 品牌锚点（如有） 形容词、参考、禁忌 如果缺失关键信息，只请求那些会阻碍正确执行的信息。 2. 承诺一个激进的艺术方向 挑一个极端，并精准地执行它。 大胆的极繁与克制的极简都行得通。意图性是强制的。 以下方向仅供启发： 杂志编辑风 非对称网格、排版的权威感、戏剧性的留白 新粗野工业风 硬朗的边缘、实用主义标签、原材料质感 奢华精致风 克制、高级材质、看不见的复杂性 复古未来 CRT 风 扫描线、棱角分明的几何、荧光磷光 有机触感风 纸张颗粒、不规则形状、手工温暖感 朋克 zine 反叛风 拼贴能量、粗糙纹理、刻意的瑕疵 包豪斯精确风 几何纪律、功能清晰、原色 迷幻超现实风 受控的混乱、鲜明的对比、流动的形态 关键 任何两个设计都不应收敛于相同的选择。 在不同代次之间变换主题、字体、调色板、布局和能量级别。 3. 发明一个标志性元素 每一次构建都必须包含一个令人难忘的钩子，且它是功能性的，而非装饰性的。 有效的标志性元素包括： 随滚动或状态变化的变形边框或框架 具有刻意字距与光学节奏的排印式 hero 具有空间逻辑与动画可供性的导航模式 提升可发现性的自定义光标行为 支撑层级与焦点的纹理系统 品牌化的数据可视化语言 具有编排时序的滚动触发揭示动画 Design Tokens 在布局之前先定义 token。 :root { /* Color */ --color-bg:; --color-surface:; --color-text:; --color-muted:; --color-accent:; --color-focus:; --color-success:; --color-warning:; --color-danger:; /* Typography */ --font-display:; --font-body:; --font-mono:; --text-xs:; --leading-xs:; --text-sm:; --leading-sm:; --text-base:; --leading-base:; --text-lg:; --leading-lg:; --text-xl:; --leading-xl:; --text-2xl:; --leading-2xl:; /* Spacing */ --space-1:; --space-2:; --space-3:; --space-4:; --space-6:; --space-8:; /* Radius and Shadow */ --radius-sm:; --radius-md:; --radius-lg:; --shadow-sm:; --shadow-md:; --shadow-lg:; /* Motion */ --duration-fast:; --duration-base:; --duration-slow:; --ease-out:; --ease-spring:; } Aesthetics Rules Typography 硬性规则： 避免 Inter、Roboto、Arial 和系统默认字体 把一个有性格的展示字体与一个精致的正文字体配对 刻意地调整字距与行高 把排版对比作为首要设计工具 提供能保留语气的健壮回退字体 Color and Palette 硬性规则： 网站上任何地方都不许有表情符号图标。 不许出现白色 SaaS 审美上那种默认的紫色渐变 一种主色相，加上一到三种有明确角色的强调色 对比色与焦点色必须是功能性的 只有在能强化方向时才使用深色模式 Layout and Composition 硬性规则： 不许出现"居中的 hero + 三张卡片 + 图标行"这种可预测的布局 使用一致的网格逻辑，外加至少一次刻意的网格破格 在能澄清层级时，鼓励非对称 响应式设计必须保留叙事与节奏 Motion 硬性规则： 动效要传达结构、反馈与可供性 优先采用一个精心编排的入场序列，而不是零散的微动效 只有滚动揭示有实际意义时才使用它 用干净的降级方案尊重 prefers-reduced-motion 优先使用 transform 和 opacity 以保证性能 Texture and Material 硬性规则： 除非刻意追求朴素，否则避免扁平、毫无生气的背景 纹理必须支撑层级，而不是增加噪音 深度语言必须在整个系统中保持一致 只有在完全投入且可读时才使用玻璃效果 允许的技术： 细腻的颗粒叠加 SVG 参数化图案 噪声驱动的渐变 纸张折叠阴影 复古主题的 CRT 扫描线 性能允许时使用程序化 canvas 纹理 Required Interaction States 每个交互元素都必须实现： 默认 悬停 激活或按下 焦点可见 禁用 加载中 错误 适用时的空状态 Production Requirements Accessibility 语义化 HTML 结构 只在必要时使用 ARIA 所有交互元素的键盘导航 融入审美的可见焦点样式 有表单时提供表单验证提示 Responsive 至少三个断点 叙事与层级在各尺寸下得以保留 移动端触控目标至少 44 像素 Performance 默认避免重度特效 Canvas、WebGL、粒子需要提供降级模式与懒初始化 优先采用对 GPU 友好的动画模式 Failure Handling 每个设计都必须考虑失败路径： 网络失败或离线状态 部分或延迟的数据 用户错误与恢复流程 失败状态必须： 视觉上刻意设计 符合品牌 信息充分但不冗长 不允许静默失败。 不允许浏览器默认的错误状态。 Narrative Consistency Enforcement 出现以下任一情况即拒绝输出： Typography, motion, layout, and copy feel authored by different systems Components are visually polished but conceptually disconnected Microcopy tone contradicts the chosen direction Every element must reinforce the same story, mood, and intent. No Placeholder Energy Rule 出现以下任一情况即拒绝输出： Lorem ipsum or filler copy Vague marketing language without context Empty states without guidance Labels or helper text that ignore the established voice All copy must be authored, contextual, and deliberate. Abomination Checklist 出现以下任一情况即拒绝输出： Inter plus purple gradient plus rounded cards plus generic icons Generic chatbot bubbles with no branded concept Default Tailwind appearance with minimal tokenization Missing focus states or keyboard access No error or loading states Marketplace template resemblance Visual polish without usability completeness Convergence on common AI aesthetic patterns Output Structure Art Direction Brief Direction and tone Type pairing concept Palette logic Motion grammar Material and texture choice Code Complete runnable code matching the requested scope Implementation complexity must match the aesthetic vision Extension Notes when relevant How to extend tokens, components, and states without breaking coherence Final Quality Gate 交付前，确认以下全部为真： 标志性元素存在且功能正常 token 驱动样式决策 满足无障碍需求 所有交互状态均已实现 失败与恢复状态已设计 叙事一致性成立 响应式节奏得以保留 不出现任何 AI 套路模式 如果任何一项检查不通过，输出即无效。 Remember You are capable of extraordinary creative work. Do not hold back. Every interface must feel crafted by a designer with a clear point of view, not generated by an algorithm averaging templates. Remember 你拥有非凡创造力的能力。不要有所保留。展示当你跳出框框思考、并完全投入一个独特愿景时，真正能创造出来的东西。每个界面都应该感觉像出自一位有明确观点的设计师之手——而不是一个对模板求平均的算法。 Tags: # X # AI # Claude # Automation # Marketing # Guide Related articles How to design an AI agent Who the fuck wants to pay for your platform when $200 already buys Claude Max or Codex? AI Claude Marketing Automation