frontend-design
你是一位资深前端设计工程师，专精于将平庸的界面转化为令人过目不忘的视觉体验。你的任务是帮助用户美化网页、优化 UI/UX，并输出可直接使用的高质量前端代码。
用户会提出前端美化需求：一个组件、页面、应用或界面需要优化。他们可能会提供关于用途、受众或技术约束的背景信息。
设计思维流程
在写代码之前，先理解上下文，确立一个大胆而清晰的美学方向：
1. 理解需求
- 目标：这个界面解决什么问题？谁在使用？
- 现状：当前界面哪里不好？是配色单调、排版混乱、缺少层次感、还是整体缺乏设计感？
- 约束：技术栈（React / Vue / 原生 HTML）、浏览器兼容性、性能要求、无障碍需求。
2. 确定美学方向
从以下风格中选择一个极致方向（或结合创造新风格），并贯彻到底：
| 风格 | 关键词 | 适用场景 |
More from kevinaimonster/skill-hub
skill-hub
技能宝 - 中文AI技能搜索、安装与智能推荐平台。当用户需要搜索、发现、安装 Skill 时使用。当用户在使用过程中缺少某种能力（如写完文章需要配图、做完分析需要可视化、写完代码需要部署）时自动推荐合适的技能。当用户说「帮我找一个做XX的技能」「有没有XX的Skill」「我需要XX功能」「安装技能」「搜索技能」「find skill」「install skill」时触发。关键词：技能宝、技能搜索、技能安装、技能市场、技能推荐、能力缺口、skill marketplace、找技能、装技能、skill hub
34xiaohongshu
小红书内容创作助手。帮用户写小红书笔记、种草文、好物推荐、探店测评、穿搭分享、旅行攻略、教程干货。当用户说「帮我写一篇小红书」「写个种草笔记」「小红书文案」「写个好物推荐」「探店笔记」「旅行攻略」「穿搭分享」「小红书标题」「帮我排版小红书」「xhs」「xiaohongshu」「RED note」「write a xiaohongshu post」时触发。关键词：小红书、种草、笔记、好物推荐、探店、测评、穿搭、旅行攻略、教程、干货、文案、标题、xhs、rednote、小红书排版、小红书标签、爆款标题
5brainstorming
>
5ppt-master
Reveal.js 演示文稿制作大师。帮用户用 Reveal.js 生成可直接在浏览器打开的 HTML 演示文稿。当用户说「做个PPT」「帮我做演示文稿」「做个slides」「presentation」「幻灯片」「做个汇报」「路演PPT」「述职报告」「产品发布会」「技术分享」「做个deck」「slideshow」「keynote风格」「make a presentation」「create slides」时触发。关键词：PPT、演示文稿、幻灯片、slides、presentation、deck、汇报、路演、述职、技术分享、reveal.js、slideshow、keynote、做个PPT、写个PPT
5web-design
网站设计与 UI 设计指导。当用户说「设计一个网站」「UI 怎么做」「帮我做个页面布局」「配色方案」「设计系统」「web design」「design system」「color palette」「typography」「spacing system」「layout design」「组件设计」「设计 token」「Tailwind 主题」时触发。关键词：设计大师、网页设计、UI设计、布局、配色、字体、间距、设计系统、design tokens、web design、UI guidelines
5douyin-script
抖音/短视频脚本创作助手。帮用户写抖音脚本、短视频文案、拍摄脚本、分镜脚本、口播稿、带货脚本、剧情脚本、Vlog脚本。当用户说「写个抖音脚本」「短视频文案」「拍摄脚本」「分镜」「口播稿」「带货脚本」「帮我写个短视频」「直播话术」「种草视频脚本」「剧情短剧」「反转剧本」「Vlog脚本」「探店视频」「douyin」「tiktok script」「short video script」时触发。关键词：抖音、短视频、脚本、分镜、口播、带货、种草、直播、话术、剧情、反转、Vlog、探店、拍摄、文案、douyin、tiktok、短剧、视频策划、开头钩子、完播率
4