查找技能

根据品牌资料、截图或现有代码制作HTML落地页、幻灯片和可交互原型，比较页面布局与视觉方案，并检查显示效果和交互行为。

• 根据品牌资料制作落地页
• 制作产品操作流程原型
• 用HTML制作演示文稿

将颜色、字体、间距等设计值及用法整理为DESIGN.md，供编程智能体使用，并协助验证结构与配色对比度、比较版本及导出到Tailwind。

• 将样式指南整理为智能体可用的规范
• 跨项目共享设计设置
• 验证配色对比度和值引用

将文字或资料制作成比较图、时间线、流程图等信息图。结合21种布局与21种视觉风格，分析内容、设计结构，并保存图像生成提示词和成品图像。

• 用图表说明不同选项的差异
• 将工作步骤制作成流程图
• 将时间线制作成图像

将系统或云环境的组成与连接整理为深色背景架构图，通过颜色区分组件和安全边界，输出可在浏览器中打开的单个HTML文件，便于说明和分享整体结构。

• 说明前端、后端与数据库的关系
• 整理云区域和子网
• 绘制微服务之间的连接

使用p5.js制作在浏览器中运行的生成艺术，以及响应操作或声音的动画，涵盖构思、实现、显示检查，并将作品导出为图像或视频。

• 通过规则与随机数创作艺术
• 制作响应鼠标操作的作品
• 制作响应声音的动画

Build HTML/CSS pages using visual specifications from 54 established websites, including Stripe, Linear, and Vercel. Templates provide colors, typography, spacing, component styles, and layouts that adapt to different screen sizes.

中文简介正在准备中。当前显示英语简介。

• Creating a landing page inspired by Stripe
• Designing a dashboard inspired by Linear
• Styling a documentation website

使用p5.js，通过粒子运动和数学规则创作原创生成艺术。作品配有交互界面，可调整数值、比较变化，使用种子复现相同条件下的画面，并保存为PNG。

• 用代码创作原创艺术
• 尝试粒子与流动效果
• 调整种子和参数比较变化

在制作新界面或改造现有界面时，根据主题与用户设计配色、字体和布局，并有针对性地调整界面文案与动态效果。

• 设计新网站的视觉风格
• 改造显得模板化的界面
• 选择适合用户的配色、字体与布局

将Anthropic的品牌配色和字体应用于制作内容，统一标题与正文的字体，根据背景调整文字颜色，并为图形设置一致的强调色。

• 按Anthropic品牌配色整理文档
• 统一标题和正文的字体
• 根据深浅背景调整文字颜色

为幻灯片、文档、报告和HTML落地页统一应用配色与字体。可从十种预设主题中选择，也可根据描述创建新主题，并在确认后应用。

• 统一幻灯片的配色与字体
• 对照视觉示例选择主题
• 统一报告和文档的外观

从配色、形状、留白和构图等设计方向入手，制作原创海报与静态艺术作品，以少量文字表达主题，输出 PNG 或 PDF，并附上设计理念文档。

• 围绕主题制作原创海报
• 创作少量文字的抽象艺术作品
• 同时保存作品与设计理念

在制作新界面或改造现有界面时，根据主题与用户设计配色、字体和布局，并有针对性地调整界面文案与动态效果。

• 设计新网站的视觉风格
• 改造显得模板化的界面
• 选择适合用户的配色、字体与布局

将颜色、间距和字体整理为共用的设计变量，生成CSS变量，定义界面组件在不同状态下的规范，检查代码中直接写入的值，并制作遵循同一品牌规则的HTML演示文稿。

• 统一颜色、间距和字体
• 整理按钮在不同状态下的规范
• 检查代码中直接写入的样式值

使用shadcn/ui和Tailwind CSS实现易于操作的表单、表格及自适应布局，统一配色、间距和深色模式，并兼顾键盘操作与屏幕阅读器。

• 制作支持键盘操作的表单
• 调整手机和电脑上的页面布局
• 统一配色与深色模式

制作标志、名片效果图、HTML幻灯片、横幅、社交媒体图片和SVG图标，并制定品牌配色与字体规则，将其应用到素材和界面设计中。

• 制作标志和名片效果图
• 为多个社交平台准备图片
• 制作HTML提案幻灯片

按用途和尺寸制作社交媒体页首、广告、网页首屏及印刷横幅。使用提供的素材或CSS图形制作多个方案，便于比较不同的设计方向。

• 制作社交媒体页首和封面
• 比较广告横幅设计方案
• 制作网页首屏主视觉

从本地资料中搜索网页、移动端和桌面端界面的设计指引，查找适合产品的配色、字体和交互规则，并依据项目所用技术，支持界面实现、审查与改进。

• 为新产品选择配色和字体
• 审查表单与键盘操作
• 修复小屏幕上的布局问题

检查网站的视觉不一致、间距、信息层次和交互迟缓等问题，直接修改源代码，为每项修复单独提交，并通过修改前后的截图核对效果。

• 查找网站中的视觉不一致
• 调整间距与信息层次
• 完善已上线网站的外观

在实施前从设计师视角检查UI/UX计划，为各项设计评分，并通过对话明确缺失的设计决策，将改进直接补入计划。

• 在实施前检查UI/UX计划
• 找出尚未明确的设计决策
• 将设计评审意见落实到计划

结合新产品的目标与竞品调研，提出配色、字体、布局、间距及动效规则，生成字体与颜色预览，并将统一的设计方向整理到DESIGN.md。

• 确定新产品的视觉方向
• 记录品牌与页面的统一规则
• 检查字体与配色组合

用AI生成多个界面设计方案，在对比面板中并排查看并整理意见，探索视觉方向，再根据反馈反复改进新界面或现有界面的设计。

• 比较新界面的视觉方向
• 探索现有界面的替代方案
• 整理多个设计方案的反馈

在真实iPhone上截取iOS应用各个屏幕，依据Apple的界面设计指南和项目设计规范评估外观，按项目评分并提出改进建议。

• 在真实iPhone上检查应用外观
• 对照项目设计规范检查屏幕
• 根据评分整理改进事项

将英文说明或mermaid源码转换为图表，同时输出源文件、可编辑的.excalidraw文件及SVG、PNG图片。支持离线渲染，并可重新导出编辑后的图表。

• 将业务说明转换为流程图
• 用图表说明系统架构
• 为文档或README准备图表

Review a screen, user flow, or component against the user's task. Assess visual hierarchy, interaction cues, error handling, accessibility, and consistency, then provide prioritized fixes with reasons and identify strengths worth preserving.

中文简介正在准备中。当前显示英语简介。

• Getting feedback on a screen or mockup
• Checking usability before a feature launches
• Reviewing a flow where users may drop off