夜雨聆风现在，让 AI 写出一个页面已经不难了。
难的是下一句：这个页面，真的像一个可以交付的产品吗？
很多时候，代码能运行，按钮也能点，但打开页面的第一眼，你还是会觉得哪里不对：大标题、大圆角、紫蓝渐变、满屏卡片，换个 Logo 就能塞进另一个项目。
我不想再靠一句“做得高级一点”反复抽卡。
所以，我把自己在前端设计、开发和验收中最常用的判断，整理成了一个开源 Skill：f-design。
图：本机运行的真实界面，非设计稿、非 AI 生图
AI 前端真正缺的，不是更多形容词
“现代、简洁、高级、有科技感。”
这些词几乎已经成了 AI 前端的默认咒语。但它们没有告诉 AI：
• 这是一个每天使用几十次的工作台，还是只看一次的活动页？ • 用户最先要完成的动作是什么？ • 哪些信息应该紧凑，哪些地方需要留白？ • 页面在 390 像素宽的手机上还能不能操作？ • 空状态、失败状态、长文本和加载状态怎么办？
缺少这些判断，提示词越长，往往只是装饰越多。
f-design 解决的不是“换一种风格”，而是让 AI 在写代码之前先理解产品。
它不是组件库，而是前端总控入口
我给 f-design 设计了两种模式。
没有具体需求时，它先帮你找路
只输入 f-design、@f-design 或 /f-design，它不会擅自开始写页面，而是先查看当前环境能用哪些能力，再按任务给出选择：
• 做后台、工具或工作台 • 改掉现有页面的“AI 味” • 做复杂动画 • 做 3D 或 WebGL • 根据截图还原界面 • 审查移动端、可访问性和交互细节
开发者不用记住一长串 Skill 名称。f-design 负责判断该叫谁、什么时候叫、没有辅助能力时如何降级。
有具体任务时，它先建立设计判断
真正执行时，流程不是“收到需求，立刻开写”，而是：
读取产品上下文 → 声明设计系统 → 选择辅助能力 → 构建 v0 → 完整实现 → 真机截图 → 不达标不交付
设计系统也不是一句“蓝色科技风”。它必须明确产品角色、用户、颜色、字体、间距、圆角、层级、动效，以及这个项目坚决不要出现什么。
这一步看似多花了几分钟，却能省掉后面大量“感觉不对，再改改”的往返。
我用一个真实任务跑了一遍
为了验证它不是纸上谈兵，我给出一个具体任务：
为高频使用的内容团队制作一个生产工作台，让编辑能查看待办、审核状态、发布排期和数据反馈，并适配桌面、平板和手机。
f-design 先识别它是运营工具，而不是营销落地页。因此界面选择了紧凑、安静、易扫描的结构：
• 左侧稳定导航，而不是巨大的 Hero • 顶部集中展示关键数字 • 主区域按真实生产阶段组织 • 颜色只承担主操作和状态表达 • 卡片只用于具体任务，不把每个页面区域都装进卡片
图：1024×768 真机浏览器截图，导航自动收窄，生产线保持可扫描
同一个页面到了手机端，不能只是把桌面等比例缩小。侧栏改成可唤起导航，指标变成两列，生产阶段回到单列，筛选项支持横向滚动。
图：390×844 真机浏览器截图；导航、筛选、新建操作均完成点击测试
这就是 f-design 特别强调的原则：截图不是交付附件，而是设计流程的一部分。
如果移动端出现文字被截断、按钮漂移、内容重叠，即使构建命令成功，也不能算完成。
“不达标不交付”不是一句口号
f-design 为较大的界面任务设置了明确的 No-Ship Gates：
• 页面本地打不开，不交付 • 没有做桌面、平板、手机截图检查，不交付 • 移动端存在溢出或无法操作，不交付 • 按钮、标签和固定控件里的文字被截断，不交付 • 构建、类型检查或测试因本次修改失败，不交付 • 换个 Logo 就像另一个 AI SaaS 模板，不交付
这次演示实际运行了环境探测、JavaScript 语法检查、三种尺寸截图，并点击验证了移动端菜单、内容筛选与新建动作。
连 Skill 自己也必须接受检查
f-design 已经公开在 GitHub，仓库默认英文 README，同时提供中文切换，并兼容 Codex、Claude Code、Cursor、Qwen Code 及其他 AIDE。
图：GitHub 仓库实拍，README、跨 AIDE 脚本和设计参考均已开源
仓库还配置了自动验证与 Gitee 同步。第一次验证真的发现了本机路径检测规则会匹配自身，修复后第二次验证和镜像同步全部通过。
图：真实 CI 记录；红色是第一次发现问题，绿色是修复后验证与同步成功
我反而愿意保留这张截图。一个只展示“永远一次成功”的工程故事，通常没有多少可信度。好的流程不是保证不犯错，而是保证错误能在交付前被抓住。
现在如何使用
Codex 用户可以直接安装：
git clone https://github.com/GrubbyLee/f-design.git ~/.codex/skills/f-design然后对 Codex 说：
使用 f-design，把这个后台首页改成适合财务人员每天使用的工作台在 Claude Code 中可使用 /f-design，Cursor 与 Qwen Code 可以直接要求 Agent 使用 f-design，也可以让它读取项目中的 SKILL.md。
项目还附带同步脚本，可以把同一份 Skill 分发到本机多个 AIDE 的 Skill 目录，避免每个工具维护一套规则。
它适合谁
如果你属于下面任何一种情况，f-design 会比较有用：
• 你会开发，但不想每次都从零描述设计要求 • 你已经安装很多前端 Skill，却记不住该调用哪一个 • AI 生成的页面功能没问题，但总有明显模板感 • 团队缺少稳定的移动端和截图验收习惯 • 你希望把自己的设计偏好留在本机或项目里，而不是写死在公开 Skill 中
f-design 不是设计师的替代品，也不会让审美变成一个按钮。
它做的是另一件更现实的事：把容易被忽略的产品判断，变成 AI 每次都必须经过的工作流程。
当 AI 写代码越来越快，真正拉开差距的，可能已经不是“会不会生成页面”，而是你有没有能力判断：什么才值得交付。
GitHub：https://github.com/GrubbyLee/f-design
Gitee：https://gitee.com/synovation/f-design