vimself

Frontend Product From Zero — Testing skill for Claude Code

Testing community

用 AI 编码助手从 0 打造纯前端(mock 数据演示、不接后端)、商业级且顶级审美的 Web 应用的一条 vibe coding 流水线 skill.

How to install Frontend Product From Zero

This entry records only its repository, not the path inside it, so there is no exact command to give. Open vimself/frontend-product-from-zero and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Frontend Product From Zero does

用 AI 编码助手从 0 打造纯前端(mock 数据演示、不接后端)、商业级且顶级审美的 Web 应用的一条 vibe coding 流水线 skill。把 ui-ux-pro-max、frontend-design、aceternity-ui、react-bits、gsap、vercel-react-best-practices、playwright、性能审计编排成"有交付物、有验收门槛"的工作流,兼容 Claude Code 与 Codex。

Alternatives in Testing

Claude Codepro — by Max Ritter - Professional development environment for Claude Code with spec-driven workflow, TDD enforcemen 1.6k ★
Web Design — A Claude Code SKILL for designing beautiful, consistent web pages — spec first, code second 686 ★
Robotics Agent Skills — Agent skills that make AI coding assistants write production-grade robotics software 170 ★

README

frontend-product-from-zero

一条**可反复复用**的 vibe coding 工作流：用 AI 编码助手，从 0 做出一款**纯前端、mock 数据演示、界面全中文、商业级且好看**的 Web 应用——不接后端、能直接演示。

这个 skill 解决什么问题

市面上前端相关的 AI skill 又多又杂：设计的、组件的、动画的、测试的、性能的……新手 vibe coding 时最容易犯的错，是**一上来把七八个 skill 全点着**，让模型直接"给我做个高级页面"，结果做出一堆**炫酷但没法用**的东西——Hero 动画很飘，按钮、空状态、错误状态却没有；改一处坏一片。

这个 skill 把那些零散能力**编排成一条有明确交付物、有验收门槛的流水线**，替你决定"**什么时候用哪个 skill、先做什么后做什么、每步做完怎么验收**"：

产品定义 → 设计系统 → 艺术方向 → 信息架构 → 静态页面
        → 组件精修 → 动效编排 → 浏览器验收 → 性能审计 → 上线

一句话核心原则：

**先让静态页面在没有任何特效的情况下"逻辑成立、任务能完成"，再增强视觉，最后才允许复杂动画。全程用最佳实践约束代码，用真实浏览器和性能数据否定"看起来应该没问题"。**

适合谁

懂一点前端开发、刚开始用 AI 编码助手（vibe coding），被繁杂的 skill 绕晕、想要一条"从 0 到完整"的整合工作流的人。
想快速做一个可演示的前端 demo / 落地页 / 后台工作台 / 数据看板，暂时不想碰后端的人，做前后端分离的项目。

前置条件

一个支持 skill 的 AI 编码助手：Claude Code 或 Codex（二者都兼容，本 skill 会自动探测）。
Node.js（建议 20 LTS 或更新）与一个包管理器（npm / pnpm 均可）。没装也没关系——见 `references/环境准备与脚手架.md` 一步步来。
默认技术栈 Next.js（App Router）+ TypeScript + Tailwind CSS + Motion（可换，见脚手架文档）。

如何安装本 skill

把**整个 `frontend-product-from-zero/` 文件夹**放到助手的 skills 目录即可（助手靠扫描该目录加载 skill）：

助手	装进项目（推荐，随项目走）	或装进用户全局（所有项目可用）
Claude Code	`<你的项目>/.claude/skills/frontend-product-from-zero/`	`~/.claude/skills/frontend-product-from-zero/`
Codex	`<你的项目>/.codex/skills/frontend-product-from-zero/`	`~/.codex/skills/frontend-product-from-zero/`

放好后，让助手重扫 skill 目录（重启会话即可）。

**Windows 用户**：本 skill 自带的自检脚本是 bash 脚本，请在 **Git Bash** 或 **WSL** 里跑；日常开发命令（npm 等）在 PowerShell 也可以。

它编排了哪些 skill（会自动补装缺的）

本 skill 只做"编排"，真正干活的是下面这些独立 skill。**你不需要手动一个个装**——进入流水线第一步（阶段 00），自带的 [`scripts/manage-skills.sh`](scripts/manage-skills.sh) 会自检并把缺的补装进项目：

能力	Claude Code 里的名字	Codex 里的名字	来源
设计系统/令牌/UX 规则	`ui-ux-pro-max`	`ui-ux-pro-max`	nextlevelbuilder/ui-ux-pro-max-skill
艺术方向/审美复查	`frontend-design`	`frontend-design`	官方插件 / anthropics/claude-plugins-official
大区块组件原料	`aceter