用于网页设计的 Claude Code

Claude Code 现在绝对算得上设计圈里最热的产品之一。它真正让人上头的地方不是“会回答问题”而是它能把你脑子里一个还没成型的想法几分钟之内就往可实现的页面上推。也就是说你不再只是停留在概念层而是能很快看到一个真正能跑起来、能预览、能继续改的网页雏形。这篇内容里我就想用一个具体例子把这件事讲清楚怎么用 Claude Code 做出一个 landing page 原型以及怎么进一步把它推进成一个接近可部署的最终页面。这次要做什么页面我会做一个食品外卖移动应用的落地页。在这之前我们其实已经用 Gemini 给这个产品做过首页 UI mockup所以这次不是从完全空白开始而是接着往前推进把单个界面扩展成一整张真正用于对外展示和转化的 landing page。也就是说这一次的重点不再只是“某个界面长什么样”而是用户第一次看到这个产品时这个页面应该怎么讲故事、怎么建立信任、怎么促使下载。场景一先快速拉出一个未来页面的原型Claude 完成这个任务大约花了 3 分钟。做新产品时尤其在设计流程前期我们通常不会一上来就抠布局细节、配色微差、动画节奏。更常见的需求是先把方向拉出来先看看这个产品页面大致会长成什么样。而这恰恰是 AI 很适合接手的环节。因为这时候我们并不需要一次就命中最终答案。我们更需要的是一个足够快的初稿用来帮自己看方向、找感觉、判断值不值得往下做。所以先把 Claude Code 打开。如果你还没装 Claude Code先装上如果你本机还没有安装 Claude Code其实也很简单直接打开终端输入命令就行。如果你用的是 Maccurl -fsSL https://claude.ai/install.sh | bash如果你用的是 Windowscurl -fsSL https://claude.ai/install.cmd -o install.cmd install.cmd del install.cmd装完之后在本地终端里输入claude按下回车。Claude 会先请求访问你的本地文件系统授权之后就会进入可工作的界面。这次我用哪个模型我这里用的是Claude Sonnet 4.6来做网页设计。它不是 Claude 体系里最顶的旗舰模型——那个是 Opus 4.6——但对网页设计这类任务来说Sonnet 4.6 已经非常够用了。更重要的是它比 Opus 更省 token也更有性价比。做这类要频繁试、频繁改、频繁生成的设计任务时成本控制其实很关键。说白了Sonnet 4.6 的优势就在于够强而且不至于太贵。第一轮 prompt我故意写得很简单正如前面说的这一轮的目标只是原型探索所以我不会一开始就把所有要求写得特别满。我直接给 Claude 的提示是code a landing page for a food delivery mobile app called Foodiez这里有一个很重要的使用特点Claude 会基于你给的 prompt 先建立任务上下文。如果它觉得信息已经够了就会直接开始做如果它发现某些关键条件还不明确它也会主动追问你。所以别觉得它追问你是“没懂”。很多时候那恰恰说明它在认真补齐上下文。这一轮大约花了 3 分钟左右Claude 就给出了第一版真实网页。任务做完后它还会顺手给你一段总结并邀请你直接在浏览器里打开页面预览。打开之后你就能看到类似下面这样的页面结果。原型最大的价值不是“完美”而是“马上能改”Claude Code 在网页设计上的一个很大优势就是它不只是生成一次给你看完就结束而是非常适合在同一个上下文里继续改。比如在我的例子里我很快就发现两个地方可以继续优化第一整页的颜色更适合改成更鲜艳的橙色因为食品外卖这个品类本身就更适合这种更有食欲感、更有冲击力的色系第二“Every Craving Covered” 这一块用网格排法有点太普通了我更希望它改成横向可滚动的卡片轮播。我不需要重新开新任务也不需要重新解释一遍背景只要在同一个聊天里直接补一句change web page color theme to vibrant orange and change the items in the Every Craving Covered section to horizontal scrollable carousel with cardsClaude 会马上接着当前上下文继续工作而且它会把自己打算改哪些部分展示给你看。你甚至能看到代码层面的 diff红色代表当前版本绿色代表它建议替换进去的新版本。也就是说你并不是在黑箱里等一个结果而是在一个可审阅、可干预的修改流程里工作。最后改完后的预览大概会像这样整体色调已经变成更鲜明的橙色而原本那块较死板的 section 也被改成了更灵活的横向滚动卡片。这一阶段最适合拿来做什么 就是拿来快速试方向、试版式、试情绪、试整体感觉。别一开始就要求它一步到位。先让它把“可能的页面”变成“可看的页面”这个阶段它的速度和互动性就已经非常值钱了。场景二从原型走向真正可交付的网页这一轮Claude 大约花了 20 分钟。当你已经大致知道自己想做什么之后下一步就不再只是“看看感觉”而是要认真把页面往可用、可复用、可上线的方向推进了。这时候prompt 的写法就必须升级。上一轮里Claude 产出的是纯 HTML/CSS/JS 页面这对快速原型来说完全没问题。但如果你真想把它变成一个接近生产环境的结果你大概率不会满足于“能跑”就算了而会希望它直接按你的技术栈来搭比如 React TypeScript Tailwind CSS 这种你团队真实会用的方案。所以这一轮 prompt我会写得更完整覆盖以下信息任务描述最终目标技术栈风格和视觉方向页面结构无障碍要求交付内容也就是说我不是只告诉它“做一个页面”而是要明确告诉它做成什么、用什么做、长什么样、包含什么模块、到什么质量标准才算完成。下面就是我给 Claude 的完整提示Build a modern, responsive landing page for a food delivery mobile app called “Foodiez”. GOAL Create a high-conversion marketing landing page that promotes the app, communicates value instantly, and drives users to download the app. TECH STACK Use: - React TypeScript - Tailwind CSS - Framer Motion for animations - Component-based architecture - Mobile-first responsive layout - Accessible semantic HTML The result must be production-ready. STYLE VISUAL DIRECTION - Clean, modern, premium UI - Bright and appetizing food delivery aesthetic - Primary color: Orange (#FF6B35) - Neutrals: white, light gray backgrounds - Soft shadows, large border radius (2xl) - Smooth micro-interactions - Use high-quality food imagery placeholders - Typography: bold, friendly, highly readable - Spacious layout with clear visual hierarchy PAGE STRUCTURE 1) NAVBAR - Logo: Foodiez - Links: How it works, Restaurants, Reviews, Download - Sticky on scroll - CTA button: “Get the App” 2) HERO SECTION Left: - Headline: “Your favorite food, delivered fast” - Subtext explaining the core value - App Store Google Play buttons - Trust indicators (rating, delivery time, number of restaurants) Right: - iPhone mockup showing the app UI - Floating animated food cards or delivery status elements 3) SOCIAL PROOF - Row of partner restaurant logos - Short testimonial cards with avatar, name, and quote - Star ratings 4) HOW IT WORKS (3 STEPS) Each step includes: - Icon or illustration - Title - Short description Steps: Browse restaurants → Order in seconds → Fast delivery 5) FEATURE HIGHLIGHTS Alternating two-column layout with image text: Features: - Real-time order tracking - Personalized recommendations - Lightning-fast checkout - Exclusive local restaurants Include subtle scroll-triggered animations. 6) APP PREVIEW SECTION - Horizontal scrollable phone mockups - Each screen highlights a key app capability 7) PROMO BANNER - “Free delivery on your first order” - Strong visual emphasis - CTA button 8) FINAL CTA SECTION - Large bold text - “Download Foodiez and get your food faster than ever” - App store buttons - Gradient or colored background 9) FOOTER - Logo - Navigation links - Social icons - App download buttons - Copyright ANIMATIONS INTERACTIONS - Smooth scroll behavior - Fade/slide-in on viewport - Hover states for buttons and cards - Parallax or floating elements in hero - Button press micro-interactions RESPONSIVENESS - Fully optimized for mobile, tablet, and desktop - Stack sections vertically on small screens - Maintain strong spacing and readability ACCESSIBILITY - Proper heading hierarchy - Alt text for images - Visible focus states - WCAG-compliant color contrast DELIVERABLE Return: - Clean structured React components - Reusable UI sections - Tailwind styling - Framer Motion animation implementation - No placeholder lorem ipsum — use realistic marketing copy for a food delivery product我是怎么把这个 prompt 喂给 Claude 的我没有直接一口气把所有内容全塞进去而是分了两步。第一步我先在已经生成原型的同一个聊天里说rebuild this page following this prompt为什么这么做因为 Claude 已经知道我前面在做什么了。它对产品、页面方向和当前上下文都有记忆所以没必要完全从零开始。然后Claude 会提示我继续补上完整 prompt。 这时我再把上面那份详细要求整段粘进去。回车之后Claude 会先把 prompt 接收、整理进任务上下文里然后开始真正执行。这一轮为什么会慢很多和前面的快速原型不同这一轮的等待时间会明显更长大概在 15 到 20 分钟左右。原因也不神秘你要求它做的事情变多了。它不再只是拉一个静态页面而是要按指定技术栈搭环境 用 React TypeScript 做组件化结构 用 Tailwind CSS 实现样式 加上 Framer Motion 动画 同时兼顾响应式和无障碍要求 还要输出尽量接近生产可用的代码结构。在我这次的例子里Claude 总共花了 18 分钟左右把 React 环境和页面代码都搭了起来。好消息是这里面绝大多数重活都由 Claude 自己完成了。整个过程基本接近自动执行我只是在关键代码改动时做了一些必要批准。最终出来的页面大体上会比最初那个原型完整得多视觉层次也更丰富细节动画和组件结构都更接近真实项目的状态。当然这里也有一个特别值得说清楚的现实就算 Claude 连续工作了十几分钟输出也不等于天然完美。你还是会发现一些视觉缺陷、细节不协调、局部排版不到位的地方。也就是说它已经能把 0 到 70、甚至 80 的工作推进得非常快但最后那一段真正精修到“质感完全在线”的过程往往还需要继续迭代。这并不是缺点反而更像它现在最真实的定位它非常擅长把你从空白推到一个非常像样的中高完成度版本 但它还不是那种你按一次回车就能完全替代资深前端设计与实现的魔法盒子。最后说到底Claude Code 在网页设计这件事上最让人兴奋的不是它单次生成结果有多炫而是它真的把设计工作流里原本很长的一段路径压短了。以前从一个模糊想法到一个可预览页面中间可能要先写需求、画草图、搭结构、写原型、找前端配合、来回沟通好几轮。 而现在你可以先用一个简单 prompt 拉出原型再在原型基础上继续细化最后甚至直接推进到一个基于真实技术栈的可运行页面。这中间当然还需要判断、需要审美、需要迭代。 可“从无到有”最重的那一段已经明显被压缩了。这才是 Claude Code 真正有杀伤力的地方。最后精通 React 面试从零到中高级(针对面试回答)CSS终极指南Vue 设计模式实战指南20个前端开发者必备的响应式布局深入React:从基础到最佳实践完整攻略python 技巧精讲React Hook 深入浅出CSS技巧与案例详解vue2与vue3技巧合集全栈AI·探索涵盖动效、React Hooks、Vue 技巧、LLM 应用、Python 脚本等专栏案例驱动实战学习点击二维码了解更多详情。