ui：新增builder风格改版尝试的文件#2845
Conversation
风格改版主要基于精灵编辑器页面与泛化社区页面：新增主要方案pencil文件；新增基于shadcn与semi design进行风格改版的pencil备份文件；新增shadcn组件库pencil文件（目前还没做builder的组件库，因此暂时放在shadcn组件库文件中）；新增pencil还原设计稿工作流说明文件；images文件中新增图片
Summary of ChangesHello @yueman920, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 本次PR的核心目标是为UI风格改版引入一套新的“builder”风格尝试文件，并提供了一份详尽的工作流指南。该指南详细说明了如何结合AI编码辅助工具与Pencil平台，高效地将Figma设计稿转化为可用的UI组件和页面结构，从而提升设计还原的效率和准确性。 Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This PR introduces a detailed workflow guide for using Pencil and AI assistants to restore design drafts, integrating AI for UI development via the Model Context Protocol (MCP). While the documentation is comprehensive, there are significant security concerns that need addressing. The UseMcpTool component executes LLM-generated tool calls without user confirmation, posing a risk of prompt injection, and debug code in the editor page leaks sensitive project information. Additionally, general feedback includes suggestions for filename standardization (using ASCII characters for cross-platform compatibility), refining Markdown formatting for improved clarity, and providing more specific file paths in Prompt examples to prevent ambiguity. Addressing these security vulnerabilities and incorporating the suggested improvements will significantly enhance the quality and security of the workflow.
| @@ -0,0 +1,59 @@ | |||
| # Pencil + AI Coding Assist 开发工作流指南 | |||
There was a problem hiding this comment.
文件名 pencil还原设计稿工作流 包含中文字符。虽然现代系统通常支持此功能，但在文件名中使用非 ASCII 字符有时会导致某些工具、脚本或版本控制系统出现问题，尤其是在跨平台环境中。为了确保最大兼容性并避免潜在问题，建议文件名仅使用 ASCII 字符（例如，英文字母、数字、连字符）。可以考虑将文件重命名为 pencil-design-replication-workflow.md。
| > "请你调用 pencil mcp，在当前活跃画布的空白区域构建一个 **sprite editor** 页面。 | ||
| > | ||
| > **在此之前，请执行以下步骤**： | ||
| > 1. 读取 `pages/editor` 以及 `components/editor`、`components/ui` 目录下的文件，了解相关页面内容结构信息。 | ||
| > 2. 结合上传的 **'精灵编辑器.png'** 这一预期效果图进行构建。 | ||
| > 3. 利用读取的信息规范和视觉参考进行构建。" |
There was a problem hiding this comment.
此处的 Markdown 格式和文件路径可以优化：
- 目前的块引用（blockquote）由于前面的空行，没有被正确地包含在列表项中。通过缩进块引用，可以将其与“Prompt 模板”列表项正确关联起来，提高结构清晰度。
pages/editor等文件路径可能不够明确。为了确保 AI 助手能够准确定位文件，建议提供更具体的、相对于项目根目录的路径。
> "请你调用 pencil mcp，在当前活跃画布的空白区域构建一个 **sprite editor** 页面。
>
> **在此之前，请执行以下步骤**：
> 1. 读取 `spx-gui/src/pages/editor` 以及 `spx-gui/src/components/editor`、`spx-gui/src/components/ui` 目录下的文件，了解相关页面内容结构信息。
> 2. 结合上传的 **'精灵编辑器.png'** 这一预期效果图进行构建。
> 3. 利用读取的信息规范和视觉参考进行构建。"
| * **📋 Prompt 模板**： | ||
|
|
||
| **场景 A：整体调整（Global）** | ||
| > "目前页面中使用的颜色不符合预期。请你按照读取文件中的设计规范进行修正（并建立变量进行引用）。" | ||
|
|
||
| **场景 B：局部调整（Local）** | ||
| > "目前页面中的 **[Preview Button]** 的样式不符合预期。请你按照文件中的规范进行修正（并建立变量进行引用）。" | ||
| > *(注：[Preview Button] 这里必须是 Pencil 画布上实际生成的图层名称,否则 AI 无法定位目标)* |
There was a problem hiding this comment.
这部分关于不同场景的 Prompt 模板结构可以改进。为“场景 A”和“场景 B”使用嵌套列表，能让文档结构更清晰，更易于阅读。
* **📋 Prompt 模板**：
* **场景 A：整体调整（Global）**
> "目前页面中使用的颜色不符合预期。请你按照读取文件中的设计规范进行修正（并建立变量进行引用）。"
* **场景 B：局部调整（Local）**
> "目前页面中的 **[Preview Button]** 的样式不符合预期。请你按照文件中的规范进行修正（并建立变量进行引用）。"
> *(注：[Preview Button] 这里必须是 Pencil 画布上实际生成的图层名称,否则 AI 无法定位目标)*
Overall AssessmentThis PR adds design files for a UI style redesign exploration. While the content is valuable for design collaboration, there are several important issues related to file naming, organization, and repository health that should be addressed. Key RecommendationsCritical:
Important:
Detailed inline comments follow. |
![fennoai[bot]](https://avatars.githubusercontent.com/in/1924301?s=60&v=4){kind=small}
| **场景 B：局部调整（Local）** | ||
| > "目前页面中的 **[Preview Button]** 的样式不符合预期。请你按照文件中的规范进行修正（并建立变量进行引用）。" | ||
| > *(注：[Preview Button] 这里必须是 Pencil 画布上实际生成的图层名称,否则 AI 无法定位目标)* | ||
| --- |
There was a problem hiding this comment.
Markdown formatting issue: The horizontal rule --- should have a blank line before it to ensure proper rendering in all Markdown parsers.
| --- | |
| > *(注：[Preview Button] 这里必须是 Pencil 画布上实际生成的图层名称,否则 AI 无法定位目标)* | |
| --- |
| @@ -0,0 +1,59 @@ | |||
| # Pencil + AI Coding Assist 开发工作流指南 | |||
There was a problem hiding this comment.
Missing file extension: This file contains Markdown content but has no .md extension. This prevents:
- GitHub from rendering it as formatted Markdown
- IDEs from applying syntax highlighting
- Documentation tools from discovering it
Recommendation: Rename to pencil还原设计稿工作流.md or use an English filename like pencil-design-workflow.md for better cross-platform compatibility.
| @@ -0,0 +1,59 @@ | |||
| # Pencil + AI Coding Assist 开发工作流指南 | |||
|
|
|||
| 这份指南记录了运用 **Gemini AI Coding Assist** 或 **Claude Code** 结合 **Pencil** (通过 MCP 协议)，在 Pencil 画布中复刻 Figma 设计稿的标准工作流。 | |||
There was a problem hiding this comment.
Missing prerequisites section: The workflow assumes Pencil and MCP are already set up. Consider adding a prerequisites section that explains:
- What Pencil is and where to download it
- Required Pencil version
- How to set up the MCP protocol integration
- How to open
.penfiles
This will help new contributors understand how to use these design files.
|
Filename issues in this PR:
|
|
Repository organization concerns:
|
|
Minor issues found:
|
2 participants
风格改版主要基于精灵编辑器页面与泛化社区页面：新增主要方案pencil文件；新增基于shadcn与semi design进行风格改版的pencil备份文件；新增shadcn组件库pencil文件（目前还没做builder的组件库，因此暂时放在shadcn组件库文件中）；新增pencil还原设计稿工作流说明文件；images文件中新增图片