生成提示词

加下面内容发送给 gpt

基于后面的内容描述，给我构建一个子agent的提示词，触发器是用户输入图片内容，或者参考xxx构建前端界面，# 基于 LLM 原理的质量提升技巧 LLM 是基于输入，预测下一个词元，平时使用时在有日志反馈的情况下，LLM 的表现会更佳

提示词

日志，

js
Please add the appropriate logging information so that you [the agent] can use that log output to figure out this issue.
请添加适当的日志信息，以便你可以使用该日志输出来找出这个问题。

结构化，

js
Create a JSON-formatted design system profile. This profile should extract relevant visual design information from the provided screenshots. The JSON output must specifically include:
The overarching design style (e.g., color palette, typography, spacing, visual hierarchy).  
The structural elements and layout principles.  
Any other attributes crucial for an AI to consistently replicate these design systems.  
Crucially, do not include the specific content or data present within the images, focusing solely on design characteristics.
创建一个 JSON 格式的设计系统配置文件。该配置文件应从提供的屏幕截图中提取相关的视觉设计信息。JSON 输出必须具体包含：
总体设计风格（例如，调色板、排版、间距、视觉层次结构）。
结构元素和布局原则。任何其他对 AI 一致复制这些设计系统至关重要的属性。至关重要的是，不要包含图像中存在的具体内容或数据，而仅关注设计特征。

让AI利用 ASCII 字符进行字符绘画，更可视化的把设计过程呈现出来

js
我新上的功能, Hero区域, 你有什么建议吗? 我要世界顶级的交互设计,简洁、专业.你拥有我所有代码的阅读权限, 
以及，这是线上地址https://raphael.app/background-remover 你可以使用playwright mcp访问它，和代码对比查看
你可以提出5种不同的方案,使用ASCII画出来,和我讨论

效果对比

输入（前）：给我搭建一个小红书首页

输入（改进版）：使用design-system-parser完成首页的编写，仿写小红书，告诉我你的设计方案，并且实现过程中需要用ASCII 码描述你的方案，至少5种，确定后再编写，你的工作目录是ai-prompt-test

不使用日志	使用日志打印

基于 LLM 原理的质量提升技巧

LLM 是基于输入，预测下一个词元，平时使用时在有日志反馈的情况下，LLM 的表现会更佳

提示词

日志，

js
Please add the appropriate logging information so that you [the agent] can use that log output to figure out this issue.
请添加适当的日志信息，以便你可以使用该日志输出来找出这个问题。

结构化，

js
Create a JSON-formatted design system profile. This profile should extract relevant visual design information from the provided screenshots. The JSON output must specifically include:
The overarching design style (e.g., color palette, typography, spacing, visual hierarchy).  
The structural elements and layout principles.  
Any other attributes crucial for an AI to consistently replicate these design systems.  
Crucially, do not include the specific content or data present within the images, focusing solely on design characteristics.
创建一个 JSON 格式的设计系统配置文件。该配置文件应从提供的屏幕截图中提取相关的视觉设计信息。JSON 输出必须具体包含：
总体设计风格（例如，调色板、排版、间距、视觉层次结构）。
结构元素和布局原则。任何其他对 AI 一致复制这些设计系统至关重要的属性。至关重要的是，不要包含图像中存在的具体内容或数据，而仅关注设计特征。

让AI利用 ASCII 字符进行字符绘画，更可视化的把设计过程呈现出来

js
我新上的功能, Hero区域, 你有什么建议吗? 我要世界顶级的交互设计,简洁、专业.你拥有我所有代码的阅读权限, 
以及，这是线上地址https://raphael.app/background-remover 你可以使用playwright mcp访问它，和代码对比查看
你可以提出5种不同的方案,使用ASCII画出来,和我讨论

基于上述提示词构建 agent / rule

js
你是一个专业的设计解析与前端构建助手。  
当用户输入图片内容或参考现有界面时，你需要完成以下步骤：  

1. **结构化提炼**  
   将输入的截图或参考界面转化为一个 **JSON 格式的设计系统配置文件**。  
   - 必须包含：
     - 总体设计风格（调色板、排版、间距、视觉层次结构）。  
     - 布局与结构原则（栅格系统、模块化、组件化）。  
     - 其他对 AI 一致复制此设计系统至关重要的属性。  
   - 禁止包含截图中的具体内容或业务数据，只关注设计特征。

2. **交互优化建议**  
   针对输入的功能/界面，提出至少 **3~5 个改进建议**，侧重世界级的交互设计（简洁、专业、可扩展）。

3. **ASCII 可视化设计**  
   使用 **ASCII 字符绘制**不同的布局或交互方案，让用户直观对比差异。  
   - 每个方案需有简短说明。  
   - ASCII 图仅需表达模块分区、层次、按钮/输入框位置等。  

4. **日志利用**（如果涉及代码或运行问题）  
   - 提示用户在代码中添加适当日志，以便你能通过日志推断问题来源并给出修复建议。  

5. **跨域能力**  
   你可以访问线上地址（如 `https://raphael.app/background-remover`）并对比代码仓库，提出差异化优化方案。  

输出时：  
- 先给出 JSON 配置文件。  
- 再给出交互优化建议。  
- 最后用 ASCII 图绘制多种方案。

案例网站

Dribbble 可以发现各种世界顶级设计的UI灵感网站

https://dribbble.com/

Mobbin 登录后可以查看各种精美的IOS/Android不同风格的UI（有收费计划）

https://mobbin.com/

CollectUI 每日精选经过分类和筛选的UI灵感截图，大多数来源于 Dribbble

https://collectui.com/

Codrops 自 2009 年以来一直致力于为网络创意提供灵感的网站

https://tympanus.net/

Uiverse 可以查阅各种组件级的精美UI

https://uiverse.io/