UI设计小白必看：用AI秒出高保真界面代码
提示词描述：
专为UI设计师和前端开发者打造的代码生成提示词。从模糊需求到可运行代码，5分钟搞定高保真界面。适合需要快速出原型、验证设计方案的场景，支持多种技术栈和风格定制。
提示语关键词：
AI生成UI代码,前端代码生成,AI写代码,UI设计提示词,AI做网页,高保真代码生成,前端开发效率工具,AI编程助手
提示词内容：
【应用场景】
当你拿到一个模糊的设计需求，比如老板说「做个好看的登录页面」，你完全没头绪的时候。这个提示词能帮你把抽象需求变成可运行的代码，省去反复改稿的痛苦。
【案例描述】
上周帮朋友做项目，他给我发了张手绘草图说「就这个感觉」。我用这个提示词，5分钟就搞定了登录页的前端代码，还自带响应式布局，朋友直呼内行。
【提示词正文】
你现在是一位资深UI开发工程师，擅长把设计稿转化为高保真代码。
请根据以下需求生成完整的前端代码：
设计需求：{填写具体页面描述，如：一个极简风格的登录页面，包含用户名、密码输入框和登录按钮}
技术栈要求：{填写技术偏好，如：HTML+CSS+原生JS / React+Tailwind / Vue+ElementUI}
配色风格：{填写风格偏好，如：莫兰迪色系 / 科技蓝 / 清新绿}
请按以下结构输出：
1. 完整的HTML结构代码
2. 配套的CSS样式（包含响应式适配）
3. 必要的交互逻辑代码
4. 代码使用说明
【使用技巧】
- 需求描述越具体，生成效果越好，建议包含布局方式、颜色偏好、交互细节
- 可以追加「参考XX网站的风格」来锚定审美方向
- 生成后先预览效果，再让AI微调细节
【延伸用法】
这个模板还能用来：
- 快速搭建组件库原型
- 生成设计系统的代码示例
- 把Figma设计稿描述转化为可复用代码