前端设计技能指南：拒绝 AI 烂俗审美
本文是一份前端设计系统技能指南，旨在创造具有鲜明视觉特征的生产级界面。文章强调从理解上下文、坚持极端艺术指导、发明标志性元素入手，严格规定字体、色彩、布局、动效及材质的硬性规则，要求摒弃 Inter 字体、紫色渐变等常见 AI 烂俗审美。同时明确了无障碍访问、响应式设计、性能优化及错误处理等生产要求，确保叙事一致性。
相关文档
designlang：一条命令提取网站设计系统
介绍开源工具 designlang，只需一条命令即可从任意网站提取 17 个以上的界面设计文件，包括 Tailwind 配置、Figma 变量、shadcn 主题，以及供 v0 或 Cursor 使用的提示词。工具还能分析四个断点下的响应式表现、悬停点击状态、无障碍对比度，并对整站设计一致性打分。提供演示 Demo，贴网址即可观看设计系统被逐步提取，过程可录像分享。适合想学习优秀网站设计语言或为老项目补充设计规范的开发者，比手动在开发者工具中逐个查找元素省事得多。
前端 UI/UX 设计：一套从灵感到落地的资源地图
作者整理了自己收藏的大量前端 UI/UX 设计资源，并借助 Codex 分类归纳，形成一张面向实际工作的资源地图。文章将设计资源分为五类：真实产品案例（UXSnaps、Mobbin、SaaSFrame）、设计模式与拆解（Design Spells、Component Gallery）、设计系统与 Design Token、组件实现（Base UI、React Aria、shadcn/ui 等）以及质量验收（WCAG 无障碍、性能测试）。作者强调有效的使用顺序是：真实案例提供证据、设计原则解释原因、设计系统形成约束、组件资源加速实现、无障碍与性能完成验收，帮助读者从'抄视觉'升级为'有理由的设计'。
让卡片设计一下子高级起来的线条动效提示词附上直接复刻
作者参考 ElevenLabs 官网安全模块，分享了一组让卡片设计显得高级的线条动效方案，并提供完整提示词可直接复刻。设计关键在于：只用黑色细线，实线画本体、圆点虚线画辅助线营造手作感；三个图形不按同一框绘制，通过大小调整达到视觉平衡；每个图标有各自的结构演示动画（球体旋转、薄板错开归齐、螺旋重长）。文中详细说明了入场画线、悬停交互、防打断处理等细节，并给出单文件 HTML 的完整实现提示词，可交由 Claude 或 ChatGPT 生成，适用于官网功能介绍、定价页、课程流程等场景。
小程序怎么排才不乱？15个布局名词看图懂
文章以Punk咖啡馆点单小程序为例，沿着菜单、规格、购物袋、确认订单四个页面，图文讲解15个布局与视觉设计名词，包括信息架构、用户流程、线框图、首屏、视觉层级、栅格、对齐、留白、响应式布局、安全区域、设计变量、语义色、字阶、行高及Padding/Margin。作者还指出固定底栏遮挡内容的常见坑，并给出从定入口、画线框、定边距对齐到小程序内验证的完整排版流程，帮助读者用具体语言描述布局需求，让AI能精准修改页面。
小程序前端怎么设计？拆解8种类型的页面重点
文章以社群小程序开发为背景，通过分析快递100、国家博物馆、优衣库、小宇宙、星巴克、影视飓风等真实案例，拆解了8种常见小程序类型的页面设计重点。每类小程序用户目标不同，页面布局与交互重点也不同：工具服务型要突出办事入口，预约服务型要说明日期、时段与名额的依赖关系，零售电商型需支持找货与比较，内容消费型要平衡发现与播放控制，餐饮点单型要确认门店与履约方式，教育学习型需区分找课与继续学习。文章还结合功能宫格、空状态、SKU、迷你播放器等概念，总结了视觉顺序、布局方式、状态区分与操作反馈等前端设计要点。
AI网站前端设计工作流：小白保姆级教程
本文介绍了一套借助 AI 完成网站前端设计与实现的标准化工作流，面向没有代码基础的设计师和小白。作者强调先判断输入材料（仅有网页链接或有 GitHub 仓库），分路线让 AI 读项目、跑起来；通过黑盒走查梳理页面清单和用户任务路径，用 Mermaid 画页面地图；按影响范围排序设计（全局壳层→P0主流程→异常状态→辅助页面→细节打磨）；拆分结构、视觉、状态、细节四轮迭代让 AI 修改并浏览器验收。文章还附带多个可直接使用的提示词模板，并推荐了灵感与素材网站，帮助读者以低成本高效交付前端项目。
Full Guide: How To Use Claude Design Inside Claude Code
本文详细介绍了如何将 Claude Design（Anthropic 的对话式设计工作区）与 Claude Code 结合使用的工作流。作者讲解了通过 MCP 服务器连接两者、使用 /design-sync 导入企业设计系统、结合截图与代码库提供上下文、利用 Refero Styles 等真实设计参考生成初版方案的方法。文章还涵盖如何通过聊天、行内评论或画布直接编辑进行迭代，安装或自建设计 Skill 以固化设计规则，以及建立评估与审批流程，最终实现从设计到代码实现的无缝衔接。同时指出了 beta 阶段的局限性。
Claude Design 实战工作流：10分钟生成专业级网站设计
文章介绍了一套高效的 Claude Design 工作流，通过建立设计系统、构建模板和使用技能预定义文案三个步骤，避免无休止的迭代，实现从想法到高保真响应式设计的快速落地。
用 AI 写前端界面生成风格千篇一律
文章指出了利用 AI 编写前端界面时风格单一、提示词难以精确描述的问题。作者推荐了 'Awesome Design Skills' 合集，该合集包含 67 套设计系统技能文件，涵盖毛玻璃、极简等多种风格。用户只需一条命令即可引入这些规范，适配 Claude Code 等工具，从而让 AI 按照既定标准生成界面，极大提升了开发效率和风格的可控性。
用好 Google DESIGN.md 与 Agent Skills 打造亿元公司质感的创业项目
文章介绍了 Google 开源的 DESIGN.md 标准，通过将设计系统的核心元素结构化，解决了 AI 生成 UI 时的一致性痛点。结合 Agent Skills，创业者可快速建立统一的设计语言，应用于官网、App、PPT 等多个触点，在 1 小时内大幅提升项目的视觉质感，使其具备独角兽公司的专业外观。
装了这个 Skill 之后，Claude Code 写出来的前端页面终于不像程序员审美了
文章介绍了一个名为 UI UX Pro Max 的项目，它通过为 AI 编程助手内置包含 161 条行业规则、67 种风格和 161 套配色的大型设计推理引擎，解决了 AI 写前端代码“功能强但审美差”的痛点。安装该 Skill 后，AI 能根据产品类型自动匹配专业的设计系统、风格、字体及色彩方案，并自动进行反模式检查，支持 React、Vue、SwiftUI 等 13 种技术栈。
无需设计的设计：工程师如何用 Agent 框架搞定 UI/UX
文章分享了作者作为一名工程师，利用三层代理框架实现端到端设计交付的实践。第一层通过 Impeccable 等技能注入专业审美，第二层使用 Paper 或 Pencil 等画布工具构建可代码化的界面，第三层利用 Variant 和 Mobbin 提升设计品味。作者展示了如何在不成为专业设计师的情况下，通过工具链组合突破技能瓶颈，实现每周发布高质量作品。
