查找技能

按照统一的颜色、文字、状态显示和交互规则创建或修改Paperclip界面，同时整理可复用组件、组件目录与示例页面。

• 按现有设计规则添加页面
• 创建可复用的界面组件
• 统一状态颜色与优先级图标

将界面布局和信息顺序绘制成黑白SVG线框图，配上编号注释；多页面设计可附带流程图，也可整理成支持目录浏览和放大的静态审阅页面。

• 实现前讨论界面布局
• 检查移动端和桌面端页面结构
• 梳理多个页面之间的流程

根据用户目标检查界面、操作流程和组件，评估信息层次、操作提示、表单、错误引导与可访问性，按理由和优先级整理修改建议，并指出后续应保留的优点。

• 获取界面或模型的具体反馈
• 在功能发布前检查易用性
• 检查疑似导致用户流失的流程

从160个动效案例中为网页或组件选择合适效果，参考HTML、CSS、JS及参数适配现有结构，涵盖文字、交互、基础和高级动效。

• 为按钮添加点击波纹
• 为标题添加打字机效果
• 让元素随滚动出现

以古典插画和钴蓝色为基调，制作带电影感滚动效果的创意工作室网站，并根据品牌及业务内容调整页面。

• 制作建筑工作室网站
• 制作古典艺术风格的作品网站
• 集中展示服务与常见问题

在制作前，根据现有设计规则、品牌资料或项目需求确定一个视觉方向，整理配色、字体和留白等实施设置，并将选定方向写入计划。

• 实施前确定设计方向
• 应用现有设计规则
• 根据品牌资料制定设计方针

制作包含价格方案卡片、功能对比表、常见问题和操作按钮的HTML页面，按需求安排方案数量及推荐标记，方便用户在订阅前比较服务内容。

• 制作订阅服务价格页原型
• 比较各方案包含的功能
• 展示个人与企业方案

以单个HTML文件制作交易分析仪表板，集中呈现市场信息与风险面板，支持明暗主题、Live/Demo模式、图表详情和命令面板操作。

• 制作金融分析终端界面原型
• 展示密集排列的市场信息界面
• 演示图表详情和交互操作

用单个HTML文件制作面向创作者的社交媒体分析界面原型，以相互一致的示例数据展示多平台粉丝数、互动指标、增长趋势、热门帖子、话题和评论。

• 制作创作者分析界面原型
• 设计多平台指标展示方式
• 展示粉丝趋势与热门帖子

制作以银灰色或奶油色为基调、质感柔和的网页原型，统一设计双层边框卡片、大圆角、悬浮导航和流畅动效，并规定移动端布局。

• 制作风格沉静的SaaS网站原型
• 探索消费产品网站的视觉质感
• 用卡片和按钮介绍功能

用于设计新网页、评估和改版现有界面，或分析网址与截图中的设计。梳理页面结构、配色、字体及交互状态，也可按优先级列出改进项。

• 设计新的落地页
• 为现有界面改进项排序
• 分析参考网页或图片

以新闻纸质感背景、黑色超粗文字和细分隔线制作瑞士印刷品风格的网页原型，仅用红色点缀，适合呈现风格硬朗、布局严整的编辑文章、作品集和宣言网站。

• 制作报纸风格的编辑页面原型
• 制作创意公司的作品集
• 制作宣言网站

为SaaS、文档或知识产品制作介绍页原型，以暖白底色、衬线标题、细分隔线和充足留白，呈现如编辑出版物般沉静的设计。

• 制作SaaS介绍页原型
• 探索文档页面的视觉设计
• 制作知识产品介绍页

将屏幕布局构想制作成手绘风格的HTML线框图，结合方格纸背景、便签、粗略图表和方案标签，可视化设计初期的想法，便于讨论与评审。

• 探索门户或仪表盘的初步布局
• 用标签标识多个设计方案
• 为屏幕草稿添加评审注释

用灰色方框绘制桌面端着陆页结构，并以编号标注对应右侧规格面板，将页面布局与简短的实现、易用性说明放在一起，便于分享和交接。

• 规划桌面端着陆页结构
• 向开发人员分享规格说明
• 检查导航与主要宣传区域的布局

将桌面端仪表盘的布局制作成以灰色块呈现的单个HTML线框图，帮助你在确定配色、照片和正式文案之前，检查导航、信息优先级及各面板的位置。

• 检查仪表盘布局
• 规划导航与信息优先级
• 安排KPI、图表和表格的位置

使用附带模板和区块布局，制作落地页、价格比较页或文档目录原型，并整理为单个HTML文件，按照现有设计设置调整颜色。

• 制作产品介绍页原型
• 创建套餐价格比较页面
• 设计文档目录页面

为现有HTML页面添加调节面板，让你直接尝试配色、字号、间距、主题和动画效果。修改即时生效并保存在浏览器中，无需反复请求智能体调整外观。

• 微调落地页配色和间距
• 演示品牌与设计系统的不同方案
• 制作可调节外观的独立演示页面

制作适合屏幕录制的历史或冷知识动画HTML场景，将像素角色、醒目的年份、动态文字和滚动时间轴组合在一起，用复古风格呈现内容。

• 制作历史讲解中的一个场景
• 用像素画介绍冷知识
• 制作适合录屏的复古动画

从源代码、Figma导出数据或截图中收集颜色、字体、间距等设计参数，整理为附有来源和使用位置的JSON文件，为后续设计系统迁移准备数据。

• 整理分散在代码中的设计参数
• 准备迁移Figma设计
• 从截图中提取设计参数

将移动应用的使用流程绘制为横向排列的三至四个手机框，用灰色占位块、虚线箭头、编号操作标签和简短注释，帮助检查画面结构与跳转关系。

• 梳理引导页到首页的流程
• 检查商品详情到确认的路径
• 在视觉设计前讨论页面跳转

从布局、是否解决需求、品牌一致性、无障碍使用和文字表达五个方面检查已完成的设计，并继续修复发现的具体问题，适合交付前检查。

• 交付前检查设计
• 核对品牌规范的一致性
• 检查键盘操作和对比度

从Figma文件中提取元素层级、颜色与文字等设计设置，以及标记为可导出的图像素材，并保存为项目文件，供后续转换和实现使用。

• 提取Figma元素结构
• 收集颜色、文字和间距设置
• 准备实现所需素材

使用WebGL制作全屏动态视觉，将着色器图案、3D场景或粒子效果与标题叠加，交付无需外部通信的单个HTML文件。

• 制作网站首屏动态视觉
• 制作带标题的生成艺术
• 试作3D场景与粒子效果