产品定义
先说清谁会用、为哪一个具体任务而来。定义第一版只做什么，以及哪些要求留到以后。
这一关要留下什么一页需求说明：目标用户、主任务、核心功能、明确不做的事、验收标准。
复制这项能力的练习提示词
先不要写代码。请根据我的想法，整理目标用户、核心任务、第一版最小范围和五条可以实际检查的验收标准。指出哪些需求还不清楚，给我可选择的方案。
从 10 种扩展到 22 种设计方向。先看小样识别视觉差别，再看适用场景，最后把“怎么跟 AI 说”复制过去。已有小样可点击体验；新增小样重点展示配色、排版与材质。
填用途 → 选风格 → 复制提示词。默认只调整现有页面的设计，适合继续优化自己的网站。
“高级一点” → 字体与留白标题只保留一个最强层级；正文 16px、行高 1.8；区块间距 48px；全页只用一个强调色，去掉多余阴影和装饰。
“更清爽” → 信息与密度减少同时出现的按钮；一张卡片只讲一件事；弱化次要信息；统一左右边界与间距，手机改为单栏。
“科技感” → 材质与色彩用深灰背景、清楚的浅色正文、一个蓝色强调色和 1px 细边框；只在首屏加少量光晕，不要给所有文字发光。
“温暖一点” → 颜色与形状用米白背景、深绿正文、陶土色强调；卡片圆角 16px；标题有书卷气，正文易读；避免大片高饱和色。
有参考图时：把截图一并发给 AI，指出“借用它的标题比例、配色与留白，保留我自己的内容”。仅报网站名容易理解不一致。混搭时：明确“瑞士排版做主风格，只在功能展示区用 Bento 布局”，不要一次堆四五个互相冲突的风格。
第一次沟通可以这样收尾：“先复述你理解的设计方向，再做一个可预览的版本；完成后检查手机布局，把预览和修改点给我看。”这能减少理解偏差，但仍需要你看实际效果。
共 22 种风格
把一切装饰砍到只剩内容本身：大留白、少颜色、克制的字体层级。看似什么都没做，其实每个像素都经过了争吵。苹果官网是祖师爷。
半透明磨砂玻璃质感：背景是彩色渐变或模糊光斑，卡片像一块块浮在彩色雾气上的毛玻璃。Apple 的 iOS 风潮带火的，高级、轻盈、有未来感。
较上月 +23.4% · 玻璃质感让数据也变轻盈
把现实世界的材质搬进屏幕：纸张的纹理、旋钮的立体、皮革的缝线。2010 年代苹果带火又亲手埋葬，如今以"新拟物（Neo-Skeuomorphism）"的身份回潮——用于点缀复古与手工感。
元素从背景里"长"出来：同一颜色的背景，靠柔和的双向阴影做出凸起/凹陷。像一块软软的橡皮泥。2019 年爆红，如今适合做控件与设置面板的点缀质感。
两种以上颜色自然过渡，2023 年起被 Linear、Stripe 玩出新高度：深色底 + 大面积流动渐变 + 发光边缘，是当下 AI 产品最爱穿的"战袍"。
像日式便当盒一样，把信息切成大小不一的圆角格子拼在一起：有大有小、错落有致、一格一事。Apple 发布会页面的御用排版，2024 年起席卷整个科技圈。
把网站当一本高级杂志来排：超大衬线标题、分栏正文、首字下沉、细线分隔、编号章节。2024–2025 年内容型网站的顶流风格，"知识分子感"拉满。
不是"把背景改黑"那么简单：深灰而非纯黑、低饱和霓虹点缀色、发光态强调。开发者工具和 AI 产品的默认皮肤，程序员看了会心一笑的"自己人暗号"。
用 Three.js 等 3D 引擎渲染沉浸式场景：漂浮的几何体、景深光斑、可拖拽的星球。2024–2025 年 AI 编程工具（v0、Lovable、bolt）已能直接生成，是"哇塞感"性价比最高的路线。
鼠标在此区域滑动 · 卡片实时 3D 透视跟随
故意的"糙"：粗黑边框、硬阴影、高饱和撞色、歪斜排版。像小孩用马克笔画的，但每一处"错误"都是故意的。Gumroad 带火，2024 年在独立工具圈疯狂流行。
靠网格和文字建立秩序：左对齐的无衬线大标题、清晰的比例、少量红色。和极简的区别是更强调对齐、信息结构与不对称构图。
这是一套设计系统的视觉方向：有层次的表面色、语义明确的主按钮、圆润组件与清楚的状态反馈。适合需要持续操作的应用。
一种适合业务工具的实用方向：中性配色、侧栏导航、紧凑表格、统一间距和清楚的状态。与展示页相比，它把操作效率放在首位。
把命令行的表达方式用于网页：等宽文字、命令提示符、线框分区、少量绿色或琥珀色。它可以是正常的网页，不要求用户真的输入命令。
$ open today
[✓] 整理笔记
[✓] 理解原理
[ ] 动手试一次
把游戏中的像素边缘、格子和等级感搬进学习工具。方块边框与阶梯式阴影比“套一款游戏字体”更能说明风格。
银色金属、酸性亮色、胶囊形元素和早期数字文化的想象。它和霓虹暗黑不同，也可以在明亮的银白背景上出现。
像捏出来的小玩具：饱满圆角、柔和立体边缘、粉彩颜色。与新拟态不同，组件和背景通常有明显的颜色差异。
这是一组气质和材质的组合：米色纸感、鼠尾草绿、低饱和配色、柔和曲线。比纯黑白极简更温暖，适合长时间阅读。
一段阅读 · 一点理解 · 一次记录
开始今日阅读 →把东方的留白、纸墨色和文字气质融入现代网页。这里讲的是可实现的视觉方向，避免把“中式”简化成大红大金和龙纹。
读有所思 · 记有所悟
低调的高级感来自文字比例、材质与空间。深色底、细衬线、少量香槟金只是其中一种做法，颜色不能替代好的内容。
借用几何、原色与功能秩序的视觉语言：圆、三角、矩形构成醒目的海报感。这里是网页中的设计借鉴，并非完整复现历史流派。
像一页真实手账：纸片、胶带、贴纸、小幅旋转和手写旁注。拼贴用于营造个人感，文章正文保持端正。
把刚刚懂的那一刻，
好好留在这一页。
延伸阅读：设计系统的原则可参考 Google Material DesignIBM Carbon 网格指南。本页的小样与提示词是教学示例，可按自己的品牌调整。
跟 AI 沟通的隐藏规则：你用词越准，它干活越顺。说"帮我调好看点"它只能瞎猜；说"加个微交互、留白不够、上 Bento 布局"它立刻心领神会。这 54 个词条按场景分好类，搜索你遇到的词，抄走提示词用法。
把整个旅程想象成一条地铁线，共 9 站。每站告诉你干什么、用什么工具、踩什么坑。工具均以 2024–2025 年主流选择为准：前端 React/Next.js + Tailwind，部署 Vercel/Cloudflare，数据库 Supabase。
git init 初始化版本管理npm install（装依赖，只需第一次）npm run dev，浏览器打开它提示的地址（通常 localhost:5173 或 3000）git init → git add . → git commit -m "第一版" → git pushgit push，线上自动更新，你不用再管"怎么发版"F12 打开控制台，红色报错截图也是线索金矿git commit 存档——改崩了 git checkout . 一秒回到改之前npm install；端口占用→换端口或重启终端；白屏→看控制台报错；部署失败→看 Vercel 的 Build 日志同一个 AI，为什么别人一次做对你改十遍？差别就在提示词的结构。五要素公式：角色 + 目标 + 风格约束 + 技术栈 + 验收标准。缺一个要素，AI 就多一分"自由发挥"——而它的自由发挥，通常不是你想要的。
先给 AI 定人设，激活对应领域的知识浓度。资深设计师和实习生，输出质量天差地别。
说清做什么、给谁用、解决什么问题。一句话讲完，别铺垫剧情。
视觉关键词全丢这里：风格流、配色、字体感觉、参考网站。词库第一章就是为这里服务的。
指定工具与框架，防止 AI 用十年前的老古董技术应付你。
定义"什么叫做对了"。有标准的活，AI 才会自查；没标准的活，全靠缘分。
[角色] 帮我做一个给咖啡店的单页官网，目标是提升到店转化。[目标] 风格：Editorial 杂志排版 + 暗色背景 + 衬线大标题，参考 Linear 的质感。[风格] 用 React + Tailwind。[栈] 验收：手机端完美适配、有菜单/位置/联系方式三个区块。[标准]"[角色] 你是一位资深前端工程师兼 UI 设计师，擅长现代网页美学。
[目标] 为「____（你的项目，如：独立咖啡店 / 个人作品集 / 新产品）」制作一个单页网站，
核心目标：____（如：展示作品吸引客户 / 促成购买 / 收集邮箱）。
[风格] 视觉风格：____（如：Bento 网格 + 玻璃拟态 / Editorial 杂志排版 / 新粗野主义）；
配色：____（如：深灰底 + 霓虹绿强调 / 米白纸感 + 朱红点缀）；
字体：____（如：中文衬线大标题 + 无衬线正文）；
参考质感：____（如：Linear / Apple 官网 / Gumroad）。
[技术栈] React + Tailwind CSS + Vite，使用响应式布局，加入滚动渐入的微交互动效。
[验收标准] 1. 手机/平板/桌面三档完美适配；2. 首屏包含价值主张与 CTA 按钮；
3. 所有文案为真实内容，禁止 lorem 占位；4. 代码结构清晰，方便后续迭代。
[角色] 你是一位全栈工程师，熟悉现代 BaaS 后端服务。
[目标] 制作一个「____（如：习惯打卡 / 留言墙 / 记账本）」Web 应用，
用户可以：____（如：注册登录 / 提交数据 / 查看所有人提交的内容）。
[风格] 界面走 ____（如：暗黑模式 + 霓虹强调 / 极简白 + 单一品牌色），克制、不花哨。
[技术栈] 前端 Next.js + Tailwind；后端用 Supabase（数据库 + 邮箱登录）；
数据库密钥一律走环境变量，禁止硬编码。
[验收标准] 1. 未登录用户只能看不能写；2. 提交后数据实时显示；
3. 手机端可用；4. 给我一份"如何配置 Supabase"的分步说明。
[角色] 你是一位擅长调试的资深工程师。
[现状] 我在运行「____（命令，如 npm run dev）」时出现以下报错：
----（此处粘贴完整报错原文）----
项目技术栈：____（如 React + Vite + Tailwind），系统：____。
[目标] 找到报错根因并修复，同时解释这个错误为什么会发生（用零基础能懂的话）。
[约束] 只改动与该问题相关的文件，不要顺手重构其他代码；
每一步修改说明改了哪个文件、为什么这么改。
[验收标准] 修复后 npm run dev 能正常启动，原有功能不受影响。
最后一条心法：提示词不是许愿，是下单。菜单写得越清楚，后厨越不会上错菜。写完先自查一遍五要素齐不齐——30 秒的自查，省掉三轮返工。
零基础也可以借助 AI 做出有专业观感的小产品。真正的进阶，是知道给谁做、怎么使用、怎样确认可靠，以及上线后怎么改。
先在一个明确的小场景里做到专业质量，再扩大范围。顶级团队还需要长期积累的领域理解、复杂系统经验、真实用户反馈与持续运营；没有一条提示词或一个 Skill 能保证补齐这些能力。
这份路线聚焦个人内容网站和小型网页产品。你不必先背整套语法，但要逐渐看懂基本结构、数据去向和验证证据。重点放在信息结构、内容准确性、长文阅读、查找与更新。先做好一篇真实文章及其图示，再形成稳定的分类、模板和发布流程。
先交付：首页 + 文章页 + 查找入口 + 来源与修订记录。先把添加、查看、修改和恢复做顺，再按需求加入跨设备同步、登录或多用户。重点放在状态、数据保存、权限与故障恢复。
先交付：一条完整操作路径 + 状态表 + 数据说明 + 验收证据。先做一个范围小但完整的版本，再沿着这条路径反复改善。
先说清谁会用、为哪一个具体任务而来。定义第一版只做什么，以及哪些要求留到以后。
先不要写代码。请根据我的想法，整理目标用户、核心任务、第一版最小范围和五条可以实际检查的验收标准。指出哪些需求还不清楚，给我可选择的方案。
网站的结构要帮助人找到答案。长文、分类、导航、标题和内部链接，比堆卡片更影响阅读。
请先用我提供的真实内容设计页面地图和阅读顺序。说明首页、列表和详情各自解决什么问题；补充分类、搜索、引用来源和更新时间的方案。不要把示例数据伪装成真实内容。
知道主次、对齐、留白、字级与对比度。确定一套规则，再把规则用于每一页。
请结合网站用途和参考截图，提炼颜色、字体、间距、圆角与组件状态。先用同一套规则做首页和一张详情页，说明哪些参考元素适合借鉴。保留我自己的文案和素材。
用户不仅会成功点击，也会输错、断网、重复提交、取消操作，或看到空内容。
请为最重要的一条操作流程列出完整状态：初始、加载、空结果、输入错误、请求失败、成功和重复点击。每种状态说明用户看到什么、下一步能做什么；失败时保留已经输入的内容。
能分清浏览器、服务器、API、数据库和本地缓存的职责。登录回答“你是谁”，权限回答“你能做什么”。
请用初学者能理解的语言，说明这个项目的前端、服务器和数据各负责什么。说明哪些数据只在当前设备、哪些要跨设备同步，以及是否需要登录；若有多用户，请列出访问权限并实际验证。
保存可恢复的版本，拆小改动，验证真实用户行为。AI 说“完成”还需要文件、页面和检查证据。
请先确认现有页面能运行，再完成一个明确的小任务。修改后实际打开浏览器走通关键路径，检查失败状态和手机布局。报告已执行的检查及结果；没有执行的检查标为未验证。
上线要能观察问题，也能回到上一版。还要知道图片、第三方服务、请求量和数据存储会带来什么成本。
请为这个项目制定预发布检查和上线后核对步骤，说明域名、缓存、环境变量、错误日志与回滚方式。如果涉及数据库变更，先做备份与恢复验证；只处理本项目实际使用的服务。
观察一个初次使用的人能否独立完成任务。先修复使人卡住的地方，再决定要不要加新功能。
请帮我安排一次简单可用性验证：找几位目标用户，不教他们操作，让他们完成核心任务。记录在哪里停顿、放弃或误解，把问题按影响排序，先挑一项修复并验证。
对照阅读：可用性原则 · 工程化协作与测试 · 权限边界 · 内容网站的搜索结构。这八项是结合这些资料整理的学习建议，不是对“顶级团队水平”的评分认证。
先做范围小但完整的作品。每完成一个阶段，都留下可预览的结果和可检查的证据；不必为了“专业”把所有框架和工具装进同一个项目。
点两种版本，比较标题、间距与主次。
从一个有意思的问题开始。
初稿：标题、说明和次要信息比较接近，内容挤在一起。试试“整理后”。
这是同一份内容的 HTML 小样，用来观察视觉层级；搜索框和文章只是示意。以一个多人收藏工具为例，走完一趟请求。
试一次保存失败，再点重试，看看状态怎样变化。
还没有记录。
用你熟悉的主题，做首页、文章、分类与搜索。明确每段内容从哪来。
练习添加、编辑、筛选、删除和恢复。先决定数据只存当前设备还是要同步。
在确有需求时再加入账号、同步和权限。先让少量真实用户完成同一项任务。
准备真实内容、需求说明、参考截图、设计规则、任务清单和验收条件。让 AI 做一个可预览的小版本，再根据实际页面迭代。需要时才引入专业组件、自动测试或后端服务。
说明当前目标、输入、约束和验收条件。一次任务一个重点。
记录已经确认的技术栈、设计和内容规范。在 Codex 中可参考 AGENTS.md 的官方加载规则。
Skill 组织可复用的流程与资源；MCP 连接外部工具能力。是否能调用、在哪里生效，仍取决于当前工具和权限。
开始时只挑一个设计方法和一个验证方法，先会用。第三方 Skill 可能带脚本；先看原始说明、来源与许可证。以下只是学习资源和模板，不会自动安装或执行。
先不要写代码。请根据我的想法，整理目标用户、核心任务、第一版最小范围和五条可以实际检查的验收标准。指出哪些需求还不清楚，给我可选择的方案。
请结合网站用途和参考截图，提炼颜色、字体、间距、圆角与组件状态。先用同一套规则做首页和一张详情页，说明哪些参考元素适合借鉴。保留我自己的文案和素材。 先展示一组代表性的组件和两种屏幕宽度的预览。不要把网页截图当作功能已经完成的证据。
请为最重要的一条操作流程列出完整状态：初始、加载、空结果、输入错误、请求失败、成功和重复点击。每种状态说明用户看到什么、下一步能做什么；失败时保留已经输入的内容。 给出一张状态表，并实际验证其中最关键的成功路径和失败路径。
请将现有内容网站整理成可长期更新的结构。保留原文与已确认的素材；明确文章标题、稳定链接、分类、搜索、引用、更新时间和修订规则。检查手机长文、图片说明、外链失效与示例标注。先选一篇文章打样，验收后再批量处理。
请从真实用户的视角验收这个版本：完成主要操作、验证一个输入错误或网络失败场景，在 320px、390px 和 1280px 宽度检查布局，检查键盘焦点与控制台错误。按“检查项—执行方式—实际结果—证据”报告。不要把没跑过的检查写成通过。若有多用户数据，再验证未登录、用户 A 和用户 B 的权限边界。
请先确认这个项目的托管方式、数据存储和现有部署流程，然后整理预发布检查、上线核对、错误观察与回滚步骤。验证的是正式域名和实际使用功能；不要把 Git push 当作网站已上线。有数据库变更时，先备份、验证迁移并演练恢复。发布权限和范围以我对本项目的明确要求为准。
先填写自己的项目事实；这是可编辑的示例，不会自动成为当前项目的规则。
# 项目协作约定（示例，按自己的项目修改） ## 项目事实 - 用途和目标用户：填写已确认的事实。 - 技术栈、启动与验证方式：先读取项目文件，记录实际可运行的方法。 - 第一版范围：填写核心任务与暂时不做的功能。 ## 内容与设计 - 保留已确认的文案、素材、链接与品牌规则。 - 示例内容必须标明；新增事实与引用应给出来源。 - 字体、配色、间距与组件状态遵循项目的设计规则。 ## 实现与验收 - 大任务拆成可预览、可独立验证的小改动。 - 验证关键用户路径与相关失败状态，保留证据。 - 不把未运行的检查写成通过；重要数据变化需备份和恢复验证。 - 发布、外部写入和不可逆操作遵循用户对当前任务的明确授权范围。
展示格式与工作步骤；如需使用，请按所用工具的官方文档创建和验证。
--- name: site-acceptance-notes description: 当用户要验收内容网站或小型网页工具时，整理并执行与当前改动相关的质量检查。 --- 1. 先明确网页的目标用户、主要任务和本次修改范围。 2. 根据项目类型列出相关检查；不要强加用不到的登录、支付或数据库流程。 3. 实际运行页面，检查关键操作、手机布局以及一个相关失败场景。 4. 对文字与图示核对来源、示例标注和表达；对多用户产品另查权限边界。 5. 输出执行方式、实际结果、证据、未验证项目与待修复问题。 验收记录不是对任意产品质量的保证；工具使用与操作权限遵循用户授权和当前工具的规则。
这是你手动填写的自评记录，不会自动测试任何网站，也不会颁发“专业级”认证。选“已核验”时补一个截图名、地址或检查记录，才计入有证据的完成项。
每完成一项验证，填一个截图、地址或记录。圆环只表示你的记录进度。
记录保存在当前浏览器。它不是所有设备共享的项目状态。
已经做好一个小版本，下一步只补一个薄弱环节：按问题查参考资源 →
学什么：理解状态反馈、错误恢复、一致性和用户控制。
用到项目里：选出你网页最重要的一条操作流程，逐条找出哪里会让人困惑。
学什么：补足 HTML、CSS、JavaScript、浏览器与网络的基本认识。
用到项目里：让 AI 结合你的实际项目，解释一个按钮从点击到显示结果经历了什么。
学什么：学习如何给出明确的前端设计约束和遵循已有设计。
用到项目里：先提炼成你的设计要求，再提供页面用途、参考截图和验收条件。
原文针对特定模型编写；不要把其中所有要求当作每个工具的通用规则。
学什么：理解 Skill 的触发条件、SKILL.md 与配套资源。
用到项目里：把反复使用的“内容校对”或“页面验收”流程写成一个小 Skill。
使用和安装方法以你所用工具的当前官方说明为准。
学什么：学习测试、Git、人工操作验证和理解 AI 改动的习惯。
用到项目里：先看 First run the tests 与 Agentic manual testing 两节，再让 AI 实际点按钮验证。
这是作者的方法论；具体测试强度要匹配你的项目。
学什么：让浏览器执行点击、输入、页面跳转和结果断言。
用到项目里：把“输入关键词后出现正确结果”变成可以重复运行的检查。
先测试关键用户路径；用例应验证行为，而不是只检查元素是否存在。
学什么：研究颜色角色、字级、形状、组件状态之间的统一关系。
用到项目里：给你的产品定义主色、正文色、表面色和按钮状态。
是一个设计系统，不代表所有网页都应该采用它的外观。
学什么：研究业务界面的网格、表格、交互与一致性。
用到项目里：做后台或资料管理工具时，先看表格、表单和导航的使用规范。
学什么：理解键盘操作、标签、焦点、读屏与颜色对比。
用到项目里：拿你的一张表单，用键盘完成填写和提交，检查是否能看见焦点。
学什么：理解加载速度、点击响应与布局稳定性。
用到项目里：让 AI 记录测量条件并查出瓶颈，再比较修改前后结果。
实验室评分和真实用户数据不同；一次高分不能证明长期体验。
学什么：了解可抓取内容、页面结构和搜索展示的基本要求。
用到项目里：检查每篇文章的标题、描述、稳定地址、内部链接与索引入口。
SEO 是长期维护工作；不能承诺收录或排名。
学什么：让 AI 在不同会话中遵守同一份项目规则。
用到项目里：只记录已确认的技术栈、运行方式、内容边界和验证要求。
其他 AI 工具的文件名和加载规则可能不同；不能只改文件名就假定会生效。
学什么：了解为什么任务拆分、反馈与持续验证会影响完成质量。
用到项目里：把一个大需求拆成可独立预览和验收的小任务，并保留进度记录。
这是工程研究与实践，不是对任意项目成功率的保证。
学什么：理解一个 Skill 文件夹的格式、元数据和可选脚本。
用到项目里：先写清什么时候触发、要做什么、怎样确认完成，再考虑脚本。
学什么：理解登录与权限的区别：服务器应检查每次访问是否被允许。
用到项目里：用用户 A、用户 B 和未登录访客验证读写边界。
隐藏前端按钮不能替代服务器或数据库的权限校验。
学什么：学习通过数据访问策略限制哪些用户可以读写哪些行。
用到项目里：先写权限矩阵，再验证“用户 A 不能读取或修改用户 B 的私有记录”。
只有使用 Supabase / Postgres 等相关方案时才需要照此实现。
学什么：读取设计目标、字体、配色、布局和执行方式的工作指引。
用到项目里：提供真实内容与参考截图，让 AI 把抽象方向落成设计规则。
已核对原始 SKILL.md；目录页访问受限时可看 raw 源文件。
学什么：了解 Skill 如何与工具和插件一起组织成可复用能力。
用到项目里：先阅读一个相关示例的说明和文件结构，不必整库安装。
旧 openai/skills 的 README 已标注弃用，并推荐这个入口；不要沿用旧教程假定它仍是主入口。
学什么：参考需求梳理、计划、调试、验证等完整工作流程。
用到项目里：先挑一个你真正缺少的流程，并检查它的确认步骤是否符合自己的工作习惯。
流程较重；一次小改动不必照搬所有步骤。
学什么：参考网页设计审查与相关框架的工程建议。
用到项目里：用 web-design-guidelines 审查实际页面；React 相关规则只用于相应技术栈。
学什么：用设计资料和规则辅助生成一致的界面方案。
用到项目里：围绕自己的产品类型生成一套规则，先人工看配色和排版，再做页面。
推荐结果与演示不等于实际产品已通过验收；安装步骤应查当前 README。
学什么：参考交互细节、动画判断与性能方面的实践。
用到项目里：只给真实操作加有用反馈，去掉影响频繁操作的装饰动画。
作者指出专业经验仍然重要；Skill 是辅助，不是审美判断的替代品。
学什么：借鉴可定制组件、表单、导航和业务页面结构。
用到项目里：挑选需要的组件，统一状态和设计规则，再适配自己的内容。
组件不自动提供登录、数据库权限或完整业务逻辑。
学什么：研究弹窗、菜单、焦点和键盘交互等基础行为。
用到项目里：需要 React 复杂控件时优先理解这些行为，再决定外观。
只适用于对应技术栈；现有纯 HTML 小站不必因此改用 React。
学什么：研究以内容为主的网站结构与按需交互。
用到项目里：当文章、专题和独立链接增多时，让 AI 比较是否需要从单文件迁移。
不要为了使用热门框架而重写一个已经足够简单的页面。
学什么：自动检查网页的部分性能、可访问性与最佳实践。
用到项目里：留存修改前后报告，并解释发现的问题影响哪类用户。
自动评分覆盖有限，不能替代真实操作、内容核对和权限测试。
学什么：把组件的不同状态独立展示和测试。
用到项目里：页面增多、多人协作时，把按钮、表单、空状态先整理成组件样例。
单页小站可以先做简单的组件示例，不必立即加入整套工作台。
学什么：学习把“为什么这样更好”的审美判断写成明确规则，交给 AI 复用。
用到项目里：对自己的布局、字体和交互做前后比较，挑出有效规则，再整理成一个小 Skill。
作者官网也提供 X / Twitter 账号入口；本次未能直接读取其帖子，不据此描述热度或效果。
学什么：比较成熟产品怎样安排页面、表单和操作路径。
用到项目里：按同一任务看多个产品，例如新手引导、搜索、设置或收藏。
部分功能需付费；参考结构和交互，不复制别人的品牌、内容与素材。
学什么：学习视觉层级、间距和界面细节的具体调整。
用到项目里：先看官网示例和免费章节，用到你现有的一张页面上。
完整资料付费；不需要购买才能执行本页的入门路线。
学什么：讨论参考截图、明确字体与配色、设计流程等做法。
用到项目里：提炼一个建议，在同一份内容上做前后对比，自己判断是否改善。
评论是个人经验，有相反意见；不是可复现的效果保证。
学什么：观察社区围绕预发布、回滚、数据库变更和日志的讨论。
用到项目里：只提取与你的项目有关的问题，再回到官方文档核对实现方法。
不要把评论当作安全结论；具体权限规则以官方文档与测试为准。
学什么：参考作者描述的设计、拆分、协作与复核流程。
用到项目里：比较你当前流程少了哪些可审查的交付件。
作者自述身份未经独立核验；不代表某家公司发布的官方工作流程。
学什么：了解这一表达的早期讨论背景，随后再看工程化方法。
用到项目里：把它当作讨论入口，不当作专业产品的验收标准。
原帖地址可通过搜索索引交叉定位；本次无法直接读取 X 正文，不判断点赞量或评论内容。
阅读顺序建议：先学判断和验证，再按实际需要选择组件、框架与 Skills。每次读一份资料，都把一个做法用在自己的页面上，并留下前后结果。