用同一套提示词：网页能做，App UI 也能做的「AI 设计+前端重构」实战流程

你可能也遇到过这种情况：

• 旧项目页面“能用但很丑”，想改又怕动太大。
• 你想要的不是“灵感图”，而是能落到前端代码结构的 UI。
• 网页、App 两套 UI 重做一遍，设计+沟通直接把人榨干。

我这次干脆用同一个提示词，拿一个“能跑的旧页面”去重构。结果很惊喜：网页设计和 App UI 界面都能搞，输出质量也很接近 Claude Design 那种风格。

下面这篇就按“你照做就能复刻”的方式写。

你要准备的东西（别复杂化）

三样就够：

1. 旧页面截图（全屏滚动长图更好）
2. 页面用途说明（一句话讲清：给谁用、用来干嘛）
3. 技术栈偏好（React/Vue/原生都行，写清楚）

可选加分项：

• 你现有的组件库（Ant Design / Element Plus / shadcn/ui）
• 品牌色、字体、暗色模式要求

实战流程：从“旧页面”重构到“能用的新 UI”

1）把页面目标说人话

别写“提升体验”。直接说场景。

例如：

• 这是给运营用的后台页面，每天要开 30 次，重点是信息密度高、别花里胡哨。
• 这是给用户付费的订阅页，重点是信任感、转化按钮清晰。

你说清楚，AI 才不会往“概念设计图”方向飘。

2）丢截图，让它先“诊断”而不是“直接开画”

你希望它先指出问题：

• 布局哪里乱
• 信息层级哪里不清
• 交互哪里反直觉

这样后面生成的新稿会更稳。

诊断提示词（可直接复制）：

你是资深产品设计师 + 前端架构师。
我会给你一张页面截图，这是一个正在使用的旧页面。

目标：在不改变核心业务流程的前提下，重构 UI，让页面更现代、更清晰、更易用。

请你输出：
1) 这张页面最影响使用的 8 个问题（按严重程度排序）
2) 每个问题给出可执行的修改建议（要具体到布局/组件/文案/交互）
3) 提供一个新的信息架构草图描述（用分区+要点的方式写）

注意：别讲抽象原则，我要能照着改。

3）让它生成两套版本：网页 + App UI（同提示词，改参数）

同一套内容，输出两种端。

• 网页端：信息密度更高、支持表格/多列
• App 端：单列滚动、底部按钮、触控优先

生成稿提示词（网页端）：

基于你刚才的诊断与信息架构，请给我一个「网页端」重构方案。

约束：
- 保持现有业务流程与字段不变（只是重排与美化）
- 风格：简洁、现代、偏 B 端但不要土
- 输出内容包含：
  A. 页面布局分区（Header/Sidebar/Main/Panel等）
  B. 每个分区包含哪些组件（卡片、表格、筛选器、Tab、弹窗）
  C. 关键文案示例（按钮、提示语、空状态）
  D. 设计细节（间距、字号层级、颜色建议）

最后给一个“最小可落地版本”的实现清单。

生成稿提示词（App UI）（同样结构，替换端的限制）：

基于同一套信息架构，请给我一个「App 端」UI 方案。

约束：
- 单列布局为主
- 关键操作尽量放在底部（底部按钮/底部导航/浮动按钮）
- 适配 iPhone 14 Pro 尺寸思路

输出：页面结构、组件清单、关键交互（例如筛选、编辑、保存）、空状态文案与样式建议。

你会发现：一套提示词把思路钉住，换端只是换约束条件，产出会非常稳。

从设计到代码：让它给“能直接开工的前端实现”

到这一步你要的不是“漂亮描述”，而是：

• 组件拆分
• 文件结构
• 可复用组件列表
• 页面骨架代码

4）让它按你的技术栈吐代码骨架

如果你用 React + Tailwind（举例），可以这么要：

把刚才的网页端 UI 方案，落到可实现的前端结构。

技术栈：React + TypeScript + TailwindCSS。

请输出：
1) 组件拆分清单（哪些是页面组件，哪些是通用组件）
2) 推荐的目录结构
3) 主页面 JSX 骨架代码（用占位数据）
4) 关键组件示例：筛选区、数据表格、详情抽屉/弹窗（各给一个示例实现）

要求：
- 代码风格统一
- 样式用 Tailwind，不要写一堆解释
- 组件命名清晰

如果你用 Vue/Element Plus，也把“React + Tailwind”换掉就行。

一套“更像 Claude Design 输出”的提示词技巧

想让结果更接近设计工具生成的观感，你可以加这些约束：

• 网格与间距：8px spacing system
• 字号层级：12/14/16/20/24
• 圆角：8 或 12（别一会儿 6 一会儿 14）
• 阴影：少量、浅、用来分层，不要“漂浮感很重”

可以直接塞进提示词末尾：

视觉约束：使用 8px 间距体系；字号层级 12/14/16/20/24；圆角统一 10px；阴影轻微，只用于层级分离；整体克制、干净。

避坑清单（这些雷我建议你直接绕开）

• 不给截图就让它“按感觉设计”：大概率跑偏，尤其是 B 端页面。
• 你一句话不讲业务流程：它会擅自删字段、改路径，后面接回真实逻辑会很痛。
• 只要一稿：一稿很容易“看着不错但不好用”。建议让它给两版：
  • 保守版（小改动，马上能上线）
  • 激进版（结构大升级，后续慢慢做）
• 组件拆分不做约束：它会写一坨大组件，后期维护直接噩梦。
• 不指定组件库/风格：它会混搭（按钮像 A 家、表格像 B 家），页面看着就“拼凑感”。

你可以拿这套流程改哪些页面？

给你几个特别适合的场景：

• 老后台的列表页：筛选区 + 表格 + 详情抽屉
• 登录/注册页：换成更像样的布局，转化会明显好一些
• 订阅/支付页：把卖点、对比、FAQ、CTA 按信息层级排清
• App 的设置页/个人中心：最吃“层级”和“间距”，AI 很擅长

评论区交作业（我好继续优化）

你要是也拿这套提示词去重构页面，建议你把反馈按这个格式丢出来：

• 你的页面类型（后台/营销页/App）
• 你用的技术栈（React/Vue/小程序）
• 哪个部分最满意
• 哪个部分最崩（例如表格、筛选、文案、交互）

信息越具体，我越能把提示词再打磨得更“傻瓜可用”。