Back to Blog
AI coding

每天上千刀 coder 的完整 AI coding SOP

拆解一个日入千刀 coder 的完整 AI coding 工作流——从需求拆解到验收交付,每一步用什么工具怎么用。

柿子··SOP
→ 在推特看原文·416 人喜欢

作为一名每天消耗上千美金费用的coder

分享下我跑通的完整AI coding SOP,纯自用心得分享 (附所有涉及到的资源地址)

需求阶段: Gemini(产品经理gems) 这阶段用来聊需求、做PRD、明确产品逻辑

前端设计: 这里我有3套打法,全部分享给大家:

方案1: 设计稿生成 → Figma转代码

用Gemini nano banana/lovart/stitch 直接生成设计稿

让ai工具通过Figma MCP读取设计文件

官方仓库: https://t.co/uutBQaRMs3

Figma插件会在Dev Mode自动启动本地MCP服务器(127.0.0.1:3845)

方案2: 对标网站直接参考

找到对标网站截图

用Frontend Design Skill指导Claude生成代码

官方Skill: https://t.co/NApUW54zQx

这个Skill会让Claude避开AI味的通用设计,做出有辨识度的界面

方案4: 专业设计系统UI UX Pro Max Skill

用UI UX Pro Max Skill 支持Claude/Cursor/Windsurf等多平台 仓库地址: https://t.co/wBfREydyYs

内置设计系统生成器,可以按行业生成配色/字体方案

框架设计: 1.Claude Opus 4.5 Plan模式设计总体架构

2.Codex 把Opus的方案给Codex补充细节,再返回Claude生成完整骨架

细节填充:

  1. 先用opus跑一遍,把基座跑出来

2.然后是Claude Sonnet完善框架

3.Codex修bug通常一遍过,修不好直接换模型就行

人工审阅:

1.感觉项目完成度差不多的时候,开启单元测试,针对于每个功能进行点对点测试

2.集成测试:整体按照用户旅程进行测试

这两步侧重点不同,缺一不可

编程工具推荐:

1.claude code-必备 2.codex-必备 3.cursor/trae/antigravity/kiro任意选配一个即可

分享完毕,大家有什么更好的方案欢迎补充

每天上千刀 coder 的完整 AI coding SOP | 超级个体柿子的博客