From ae9157c161cda0a7edbef2f20d1dc1da29907d87 Mon Sep 17 00:00:00 2001 From: JOJO <1498581755@qq.com> Date: Tue, 26 May 2026 02:02:14 +0800 Subject: [PATCH] fix(skills): update frontend design skill and read_skill output --- agentskills/frontend-design/SKILL.md | 88 ++++++++++++++++++++-------- config/skill_hints.json | 2 +- test/test_tool_result_formatter.py | 29 +++++++++ utils/tool_result_formatter.py | 2 +- 4 files changed, 93 insertions(+), 28 deletions(-) create mode 100644 test/test_tool_result_formatter.py diff --git a/agentskills/frontend-design/SKILL.md b/agentskills/frontend-design/SKILL.md index 5be498e..2ec2a42 100644 --- a/agentskills/frontend-design/SKILL.md +++ b/agentskills/frontend-design/SKILL.md @@ -1,42 +1,78 @@ --- name: frontend-design -description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics. +description: 创建具有鲜明风格、生产级品质和高设计水准的前端界面。当用户要求构建 Web 组件、页面、作品、海报或应用，以及创建html卡片时使用此 skill（例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或任何 Web UI 的样式设计/美化）。生成富有创意、精致完善的代码与 UI 设计，避免泛泛的 AI 风格审美。 license: Complete terms in LICENSE.txt --- -This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. +这个 skill 用于指导创建具有鲜明风格、生产级品质的前端界面，避免通用、粗糙的“AI 垃圾感”审美。请实现真正可工作的代码，并对审美细节与创意选择投入极高关注。 -The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints. +用户会提供前端需求：要构建的组件、页面、应用或界面。他们也可能提供用途、受众或技术约束等上下文。 -## Design Thinking +## 设计思考 -Before coding, understand the context and commit to a BOLD aesthetic direction: -- **Purpose**: What problem does this interface solve? Who uses it? -- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction. -- **Constraints**: Technical requirements (framework, performance, accessibility). -- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember? +在编码之前，先理解上下文，并明确采用一个**大胆且符合实际业务场景**的审美方向： -**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity. +- **目的**：这个界面解决什么问题？谁会使用它？ +- **调性**：选择一种鲜明取向：极致极简、极繁混沌、复古未来主义、有机/自然、奢华/精致、玩具般俏皮、编辑部/杂志风、粗野主义/原始感、装饰艺术/几何、柔和/粉彩、工业/实用主义，等等。可从这些方向中获取灵感，但最终设计必须忠于所选的审美方向。 +- **约束**：技术要求（框架、性能、可访问性）。 +- **差异化**：是什么让它令人难忘？用户会记住的那一个点是什么？ -Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is: -- Production-grade and functional -- Visually striking and memorable -- Cohesive with a clear aesthetic point-of-view -- Meticulously refined in every detail +**关键要求**：选择清晰的概念方向，并以精准方式执行。大胆不等于浮夸，克制也不等于平庸。大胆的极繁主义和克制的精致极简都可以成功——重点是意图明确、符合场景，而不是视觉强度本身。 -## Frontend Aesthetics Guidelines +审美方向必须服务于产品目标、用户心智和使用场景。例如，论文查重、AIGC 检测、金融、医疗、法律、政企工具、学术系统等场景，通常更需要可信、清晰、冷静、专业和可解释，而不是霓虹赛博朋克、过量发光边框、强烈蓝紫渐变或炫技动效。娱乐、游戏、活动页、艺术项目等场景可以更大胆实验，但仍然必须与内容和受众相匹配。 -Focus on: -- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font. -- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. -- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise. -- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density. -- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays. +然后实现可工作的代码（HTML/CSS/JS、React、Vue 等），并确保它： -NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character. +- 具备生产级质量且功能完整 +- 视觉上醒目、令人印象深刻 +- 具有统一且清晰的审美观点 +- 每一个细节都经过认真打磨 -Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations. +## 前端审美指南 -**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well. +重点关注： -Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision. +- **字体排印**：选择美观、独特、有趣的字体。避免使用 Arial、Inter 这类常见字体；改用能提升前端审美的、有辨识度且富有性格的字体选择。将独特的展示字体与精致的正文字体搭配使用。 +- **色彩与主题**：坚持统一的审美体系。使用 CSS 变量保持一致性。主导色配合锐利强调色，通常比胆怯、平均分配的调色板更有表现力。 +- **动效**：使用动画增强效果与微交互。对于 HTML，优先采用纯 CSS 方案。React 中如可用，可使用 Motion 库。关注高影响力时刻：一次精心编排、带有错峰显现（animation-delay）的页面加载动画，往往比零散的微交互更令人愉悦。使用令人惊喜的滚动触发与悬停状态。 +- **空间构图**：采用出人意料的布局。不对称、重叠、对角线流动、打破网格的元素。可以使用充足的留白，也可以使用受控的高密度排布。 +- **背景与视觉细节**：营造氛围与深度，而不是默认使用纯色背景。添加符合整体审美的上下文效果与纹理。运用富有创意的形式，例如渐变网格、噪声纹理、几何图案、分层透明、戏剧化阴影、装饰性边框、自定义光标与颗粒叠层。 + +绝不要使用通用的 AI 生成式审美，例如过度使用的字体家族（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白色背景上的紫色渐变）、可预测的布局与组件模式，以及缺少特定上下文个性的模板化设计。 + +### 必须避免的 AI 味垃圾审美 + +尤其要避免以下常见问题： + +- 大面积蓝色、紫色、粉紫色渐变背景，尤其是在与业务气质无关时。 +- 把标题、按钮、卡片、背景、图标全部做成蓝紫渐变或霓虹发光效果。 +- 机械套用玻璃拟态、毛玻璃、模糊圆斑、发光描边和大阴影。 +- 页面看起来像通用 AI SaaS 模板：大标题、紫色渐变按钮、三张功能卡片、虚假数据面板。 +- 为了“科技感”加入与产品无关的星空、网格、粒子、赛博朋克霓虹、3D 球体或漂浮光效。 +- 滥用 emoji，尤其是火箭、闪电、星星、魔法棒、机器人、彩虹等和产品气质不匹配的符号。 +- 用 emoji 替代真正设计过的图标系统。除非产品本身是轻松、社交、儿童、游戏或玩具化风格，否则应优先使用统一风格的 SVG 图标、线性图标、品牌插画或纯排版符号。 +- 图标风格混乱：emoji、线性 icon、填充 icon、3D 图标、表情符号随意混用。 +- 过度圆角、过度阴影、过度发光、过度动画，导致信息层级和专业感被削弱。 +- 动效只是为了炫酷存在，而不是用于强调状态变化、引导视线、解释结构或提升反馈。 +- 配色只追求“炫”，不考虑阅读性、可信度、业务语境、品牌一致性和可访问性。 + +要进行创造性解读，做出意想不到但真正贴合上下文的选择。任何设计都不应该彼此雷同。请在明暗主题、不同字体、不同审美方向之间变化。绝不要在多次生成中趋同到常见选择（例如 Space Grotesk）。 + +## HTML 卡片与小尺寸展示规范 + +在本项目中，HTML 卡片也是重要的展示形态。不要默认把所有 HTML 输出都设计成完整官网或大型落地页；很多时候它会出现在聊天流、报告流、任务结果或侧边面板中，更像一张精心设计的信息卡、报告摘要或小型操作面板。 + +设计 HTML 卡片时遵循： + +- 默认按小容器设计，而不是按全屏页面设计。卡片常见显示区域约为 `600px` 左右宽高。 +- 实际渲染内容不要过大，避免在聊天界面或结果面板中出现超长滚动、巨大留白或需要大屏才能看清的布局。 +- 优先在有限空间内表达最关键的信息层级：标题/结论、核心数据或状态、简短说明、必要操作或提示。 +- 使用紧凑但不拥挤的间距。字号、图表、按钮、图标都要适配卡片尺寸。 +- 避免依赖全屏背景、大面积装饰、复杂滚动叙事、多栏大屏布局或过长动画。 +- 如果信息很多，优先使用摘要、分组、折叠、分页或“查看详情”结构，而不是把所有内容无差别堆进卡片。 +- 卡片可以有明确审美与细节，例如精致边框、轻量纹理、局部 SVG、状态色、微动效，但必须服务于信息表达。 +- 对于报告、检测、审核、论文、AIGC 率、风险分析等场景，卡片应优先体现可信、清晰、可读和结论明确，而不是浮夸科技感。 + +**重要**：让实现复杂度与审美愿景相匹配。极繁主义设计需要更复杂的代码、大量动画与效果。极简或精致设计则需要克制、精准，以及对间距、字体排印和细微细节的谨慎关注。优雅来自于对愿景的高质量执行。 + +请记住：你能够完成非凡的创造性工作。不要保守，要展示在跳出框架思考并完全投入鲜明愿景时，真正能够创造出的作品。 diff --git a/config/skill_hints.json b/config/skill_hints.json index 24693fb..211f2d8 100644 --- a/config/skill_hints.json +++ b/config/skill_hints.json @@ -43,7 +43,7 @@ "keywords": [ "网页", "前端", "界面", "UI", "页面", "组件", "网站", "落地页", "仪表板", "dashboard", "react", "vue", "html", "css", "样式", - "美化", "设计", + "美化", "设计","画", "webpage", "frontend", "interface", "page", "component", "website", "landing page", "styling", "beautify", "design" ], diff --git a/test/test_tool_result_formatter.py b/test/test_tool_result_formatter.py new file mode 100644 index 0000000..adee779 --- /dev/null +++ b/test/test_tool_result_formatter.py @@ -0,0 +1,29 @@ +import unittest + +from utils.tool_result_formatter import format_tool_result_for_context + + +class ToolResultFormatterTest(unittest.TestCase): + def test_read_skill_formats_full_read_content_like_read_file(self): + result = { + "success": True, + "type": "read", + "path": "skills/frontend-design/SKILL.md", + "max_chars": 50000, + "truncated": False, + "content": "# Skill\nFull content", + "line_start": 1, + "line_end": 2, + "total_lines": 2, + "message": "已读取 skills/frontend-design/SKILL.md 的内容（行 1~2）", + } + + formatted = format_tool_result_for_context("read_skill", result) + + self.assertIn("读取 skills/frontend-design/SKILL.md 行 1~2", formatted) + self.assertIn("```\n# Skill\nFull content\n```", formatted) + self.assertNotEqual(result["message"], formatted) + + +if __name__ == "__main__": + unittest.main() diff --git a/utils/tool_result_formatter.py b/utils/tool_result_formatter.py index 4d7489d..84709a5 100644 --- a/utils/tool_result_formatter.py +++ b/utils/tool_result_formatter.py @@ -274,7 +274,7 @@ def format_tool_result_for_context(function_name: str, result_data: Any, raw_tex return text return "" - if function_name == "read_file" and isinstance(result_data, dict): + if function_name in {"read_file", "read_skill"} and isinstance(result_data, dict): return format_read_file_result(result_data) if function_name == "write_file_diff" and isinstance(result_data, dict):