JOJO
398ee6e760
Refactor conversation persistence into workspace-scoped storage with host workspace legacy migration, current workspace filtering, and active host workspace state protection. Add proactive recent-conversation prompt injection with personal-space controls, configurable item count, empty-conversation filtering, and frozen per-conversation prompt metadata to keep request caches stable. Introduce conversation_search and conversation_review tools for current-workspace history: multi-keyword search, list mode, current conversation exclusion, message/tool counts, formatted model output, read/save review modes, long-review fallback, and .agents/review storage. Move internal workspace artifacts under .agents, including uploads, skills, compact results, and reviews; update prompt file-tree visibility, compression output, upload paths, and hidden versioning exclusions. Add create_skill workflow and a Skills tool category, move read_skill into Skills, validate/归档 skill folders, support host global skills and Docker/API private skills, and sync private skills into .agents/skills and skill prompts. Update frontend tool icons, statuses, and expanded renderers for conversation recall and skills workflows; add workspace conversation and skills-manager tests.
7.6 KiB
| name | description | license |
|---|---|---|
| frontend-design | 创建具有鲜明风格、生产级品质和高设计水准的前端界面。当用户要求构建 Web 组件、页面、作品、海报或应用，以及创建html卡片时使用此 skill（例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或任何 Web UI 的样式设计/美化）。生成富有创意、精致完善的代码与 UI 设计，避免泛泛的 AI 风格审美。 | Complete terms in LICENSE.txt |
这个 skill 用于指导创建具有鲜明风格、生产级品质的前端界面，避免通用、粗糙的“AI 垃圾感”审美。请实现真正可工作的代码，并对审美细节与创意选择投入极高关注。
用户会提供前端需求：要构建的组件、页面、应用或界面。他们也可能提供用途、受众或技术约束等上下文。
设计思考
在编码之前，先理解上下文，并明确采用一个大胆且符合实际业务场景的审美方向：
- 目的：这个界面解决什么问题？谁会使用它？
- 调性：选择一种鲜明取向：极致极简、极繁混沌、复古未来主义、有机/自然、奢华/精致、玩具般俏皮、编辑部/杂志风、粗野主义/原始感、装饰艺术/几何、柔和/粉彩、工业/实用主义，等等。可从这些方向中获取灵感，但最终设计必须忠于所选的审美方向。
- 约束：技术要求（框架、性能、可访问性）。
- 差异化：是什么让它令人难忘？用户会记住的那一个点是什么？
关键要求：选择清晰的概念方向，并以精准方式执行。大胆不等于浮夸，克制也不等于平庸。大胆的极繁主义和克制的精致极简都可以成功——重点是意图明确、符合场景，而不是视觉强度本身。
审美方向必须服务于产品目标、用户心智和使用场景。例如，论文查重、AIGC 检测、金融、医疗、法律、政企工具、学术系统等场景，通常更需要可信、清晰、冷静、专业和可解释，而不是霓虹赛博朋克、过量发光边框、强烈蓝紫渐变或炫技动效。娱乐、游戏、活动页、艺术项目等场景可以更大胆实验，但仍然必须与内容和受众相匹配。
然后实现可工作的代码（HTML/CSS/JS、React、Vue 等），并确保它：
- 具备生产级质量且功能完整
- 视觉上醒目、令人印象深刻
- 具有统一且清晰的审美观点
- 每一个细节都经过认真打磨
前端审美指南
重点关注：
- 字体排印：选择美观、独特、有趣的字体。避免使用 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 率、风险分析等场景，卡片应优先体现可信、清晰、可读和结论明确，而不是浮夸科技感。
- 卡片可以包含精美优雅的动画交互，但不要包含任何元素的初始动画或出场动画效果
重要：让实现复杂度与审美愿景相匹配。极繁主义设计需要更复杂的代码、大量动画与效果。极简或精致设计则需要克制、精准，以及对间距、字体排印和细微细节的谨慎关注。优雅来自于对愿景的高质量执行。
请记住：你能够完成非凡的创造性工作。不要保守，要展示在跳出框架思考并完全投入鲜明愿景时，真正能够创造出的作品。