相关介绍
AI 辅助生成前端代码（AICoding）已成为提升开发效率的重要手段。无论是官网建设、SaaS 产品界面、还是营销落地页，个人开发者或者企业团队，都能使用 AICoding 快速生成对应的页面。
在享受效率红利的同时，一个普遍存在的痛点一直在被讨论——AI 生成的前端页面普遍存在「AI 味儿」过重的问题：
配色与背景趋同：大面积使用蓝色、紫色渐变等「安全但乏味」的配色方案； 布局模式单一：使用相似的模板化布局，缺乏创新的布局和空间组织； 细节处理生硬：按钮状态、阴影、间距等视觉细节缺乏精细打磨； 动效与反馈缺失：缺乏细腻的交互反馈和动画过渡； 响应式适配不足：移动端布局常出现错乱问题等。
从「生成」到「设计」的转变
frontend-design
业界也在做这些方面的尝试，比如 Anthropic 为 Claude 开发的 frontend-design Skill[1]，采用一种结构化的设计知识技能包。通过系统化的设计规则库，引导 AI 生成富有创意、精致的代码，避免泛泛的 AI 美学。包括：
设计基调选择：极简、极繁混乱、复古未来主义、有机/自然、奢华/精致 等； 字体 & 排版：使用美观、独特且有趣的字体和排版； 主题 & 色彩：主导色彩配以鲜明点缀，胜过胆怯且均匀分布的调色板； 动效：使用动画来实现特效和微观互动，使用滚动触发和悬停状态来惊喜； 背景与视觉细节：营造氛围和深度，而不是默认纯色，使用渐变网格、几何图案、阴影等创意形式；
ui-ux-pro-max
社区也有类似 ui-ux-pro-max[2] 的解决方案，也是基于 Skill 的，可以集成到 Claude Code、Cursor、Windsurf、Kiro 等 CLI 或者 IDE 中使用。提供：
57 种界面风格：玻璃形态、黏土形态、极简主义、野兽派、新形态、便当网格、暗色模式等； 95 种色板：针对 SaaS、电子商务、医疗、金融科技、美妆等行业专属调色板； 56 种字体配对：搭配 Google 字体导入的精心排版组合； 24 种图表类型：仪表盘和分析建议； 10 个技术栈：React、Next.js、Vue、Nuxt.js、Nuxt UI、Svelte、SwiftUI、React Native、Flutter、HTML+Tailwind； 98 用户体验指南：最佳实践、反模式与无障碍规则。
它在最基础的基于 Markdown 描述之上，建立了一套细分的设计语言系统，使用 Python + csv 做匹配召回：
csv 文件管理各个设计细节的建议和最佳实践； Python 脚本负责在 Skill 调用过程中，做本地查询召回；
👇🏻 .claude/skills/ui-ux-pro-max/data/typography.csv
生成对比
我们使用 Claude Code + DeepSeek 来生成一份官网，不使用任何 Skill 的版本作为基线进行对比，使用相同的产品需求文档 PRD，原始 PRD 如下：
🤔 考虑到图片对整个站点的颜值影响非常大，在 PRD 里面对主要用到的图片都做了统一提供。
西安旅游官网 PRD（产品需求文档）
> 目标用户：计划前往西安旅游的游客（国内/国际）、自由行游客、家庭游、学生团体、商务出差兼顾旅游人群
# 1. 项目背景与目标
## 1.1 项目背景
西安作为十三朝古都、丝绸之路起点、历史文化名城，拥有丰富的旅游资源（华清池、大雁塔、城墙、碑林等）。当前游客在规划行程时面临信息碎片化、购票流程复杂、路线不清晰等问题。建立一个官方、权威、一站式旅游服务平台，可提升游客体验，促进本地旅游经济发展。
## 1.2 项目目标
- 提供全面、准确、实时的西安旅游资讯
- 实现景点门票在线预订与电子导览服务
- 推荐个性化旅游路线（一日游/多日游/主题游）
- 整合交通、餐饮、住宿等配套服务入口
- 增强游客互动性（评论、攻略、问答社区）
- 提升西安旅游品牌形象与数字化服务能力
# 2. 核心功能模块
## 2.1. 首页（Home Page）
- 轮播图：展示热门景点/节庆活动/限时优惠
- 快速导航：
- 景点推荐
- 热门路线
- 在线购票入口
- 交通指南
- 最新公告
- 搜索框：支持按关键词（如“兵马俑”、“回民街”）或分类搜索
- 今日推荐 / 人气榜单：动态更新TOP景点/路线
- 天气与实时人流提示（可选API对接）
## 2.2. 景点介绍模块（Attractions）
- 分类展示：历史遗迹 / 文化街区 / 自然风光 / 博物馆
- 单个景点详情页：
- 高清图片轮播 + 视频导览（可选）
- 开放时间、门票价格、优惠政策（学生/老人/军人）
- 地理位置 + 导航入口（嵌入百度/高德地图）
- 游客评分 + 点评摘要
## 2.3. 路线规划模块（Itineraries）
- 一日游经典路线（如：兵马俑+华清池+大唐不夜城）
- 两日游深度路线（含博物馆、城墙骑行、非遗体验）
- 主题路线：美食之旅、汉唐文化之旅、亲子研学路线、夜游路线
## 2.4. 餐饮推荐（Accommodation & Dining）
- 特色小吃推荐（肉夹馍、羊肉泡馍、凉皮等）
- 明星餐厅/老字号榜单
- 用户评分+照片墙
# 3. 实现建议
- 纯前端页面，不带任何后端、数据库相关能力
- 前端使用 vite + React + radix-ui + lucide icon + tailwind 完成
- 页面尽可能美观
# 4. 使用图片
需要对整个站点使用到的图片 URL 进行修改，替换成我提供的。另外对 Banner 展示的地方，不使用纯色或者渐变背景，而是使用我提供的对应图片。图片列表如下：
- 大雁塔横版图片：https://nihaochinatour.com/storage/resized/xHDv83kKXhhOKZ0m7HXfeu0HXGnHCvkJbbjHMQSD.webp
- 大雁塔竖版图片：https://plus.unsplash.com/premium_photo-1692673142063-e1184cb78c0e?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0
- 兵马俑：https://images.pexels.com/photos/16472055/pexels-photo-16472055.jpeg
- 华清池：https://res.klook.com/image/upload/activities/hhruwmaoyzsujjo04uv1.jpg
- 凉皮：https://dynamic-media-cdn.tripadvisor.com/media/photo-o/0c/93/b8/a6/caption.jpg
- 肉夹馍：https://imgs.699pic.com/images/604/009/366.jpg!list1x.v2
- 西安城墙：https://www.ourchinastory.com/images/cover/snapshot/2021/10/horizontal/%E7%95%B6%E4%BB%A3%E4%B8%AD%E5%9C%8B-%E5%9C%96%E8%AA%AA%E4%B8%AD%E5%9C%8B-%E8%A5%BF%E5%AE%89%E5%9F%8E%E5%A2%BB%E6%AD%B7%E5%8F%B2_x1.jpg
- 历史博物馆：https://v.greattibettour.com/photos/2023/01/shanxi-history-museum-19-51068.webp
- 羊肉泡馍：https://q7.itc.cn/q_70/images03/20250722/b3aa780bb5274be1ad9615f8520f5591.jpeg
- 古城灯光秀：https://pic.nfapp.southcn.com/nfplus/ossfs/pic/xy/202402/15/cb576b6976f74b2aa58ac8fee090822e_batchwm.jpg?x-oss-process=style/w640
- 饺子宴：https://www.ourchinastory.com/images/cover/cultural-heritage/2022/03/square/%E7%95%B6%E4%BB%A3%E4%B8%AD%E5%9C%8B-%E6%96%87%E5%8C%96%E5%82%B3%E6%89%BF-%E8%A5%BF%E5%AE%89%E9%A4%83%E5%AD%90%E5%AE%B4%E4%B8%8B_x1.jpg
- 汉服 & 梦回大唐：https://res.klook.com/images/fl_lossy.progressive,q_65/c_fill,w_1000,h_584/w_61,x_11,y_11,g_south_west,l_Klook_water_br_trans_yhcmh3/activities/mkkvqkgzlgyaatwms0vl/%E5%A4%A7%E5%94%90%E8%8A%99%E8%93%89%E5%9B%AD%E3%80%8A%E6%A2%A6%E5%9B%9E%E5%A4%A7%E5%94%90%E3%80%8B%E9%97%A8%E7%A5%A8.jpg
不使用任何 Skill
具体使用
帮我完成这个前端页面的编写，具体的需求文档在：../prd.md 文件中
可以看到任务开始后直接开始探索项目，并生成对应的文件：
整体 Token 和 耗时消耗如下：
frontend-design
安装 & 启动
# 启动 Claude Code
claude
# 查看 plugin
/plugin
# 搜索 frontend-design 并安装即可
具体使用
帮我完成这个前端页面的编写，具体的需求文档在：../prd.md 文件中。
需要使用 frontend-design 这个 Plugin/Skill
在生成过程中，会调用到 frontend-design 这个 Skill，并生成对应的设计要点（字体、色彩、布局、动效）等。然后才生成对应的代码文件：
整体 Token 和 耗时消耗如下：
ui-ux-pro-max-skill
安装 & 启动
# 安装
npm install -g uipro-cli
# 为 Claude 初始 skill
uipro init --ai claude
claude
安装完成后，在项目目录的 .claude 文件夹下，会有对应的 skill 目录，包括：
SKILL.md：skill 的总体描述scripts/*.py：召回相关的脚本data/*.csv：设计语言相关的数据汇总data/stacks/*.csv：技术栈相关的数据
具体使用
帮我完成这个前端页面的编写，具体的需求文档在：../prd.md 文件中。
需要使用 ui-ux-pro-max 这个 Skill
在生成过程中，会主动调用到 ui-ux-pro-max 这个 Skill，同时调用 Skill 中的 scripts 脚本，对 csv 进行各个维度的召回。最后才生成对应的代码：
整体 Token 和 耗时消耗如下：
效果对比
整体生成的效果如下，可以看到从生成的页面内容长度、丰富度、色彩搭配等维度：
使用 Skill 的生成质量明显更高； 整体来看 ui-ux-pro-max 的效果最好；细节、内容都比较丰富； frontend-design 的效果也不错，在鼠标浮动到卡片上时，有很多动效；
如果想轻量使用或者自己的项目里面 Prompt 调优，可以直接参考 frontend-design 如果是行业类 SaaS 页面，可以使用 ui-ux-pro-max
不使用任何Skill
frontend-design
ui-ux-pro-max
相关资料
Improving frontend design through Skills | Claude[3] GitHub - nextlevelbuilder/ui-ux-pro-max-skill[4] Github - Claude/frontend-design[5]
Reference
frontend-design Skill: https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design
[2]ui-ux-pro-max: https://ui-ux-pro-max-skill.nextlevelbuilder.io/
[3]Improving frontend design through Skills | Claude: https://claude.com/blog/improving-frontend-design-through-skills
[4]GitHub - nextlevelbuilder/ui-ux-pro-max-skill: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
[5]Github - Claude/frontend-design: https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
