用于网页设计的 Claude Code

@大迁世界

659人浏览 · 2026-03-25 12:00:00

@大迁世界 · 2026-03-25 12:00:00 发布

Claude Code 现在绝对算得上设计圈里最热的产品之一。

它真正让人上头的地方，不是“会回答问题”，而是它能把你脑子里一个还没成型的想法，几分钟之内就往可实现的页面上推。也就是说，你不再只是停留在概念层，而是能很快看到一个真正能跑起来、能预览、能继续改的网页雏形。

这篇内容里，我就想用一个具体例子，把这件事讲清楚：怎么用 Claude Code 做出一个 landing page 原型，以及怎么进一步把它推进成一个接近可部署的最终页面。

这次要做什么页面？

我会做一个食品外卖移动应用的落地页。

在这之前，我们其实已经用 Gemini 给这个产品做过首页 UI mockup，所以这次不是从完全空白开始，而是接着往前推进：把单个界面，扩展成一整张真正用于对外展示和转化的 landing page。

也就是说，这一次的重点，不再只是“某个界面长什么样”，而是：用户第一次看到这个产品时，这个页面应该怎么讲故事、怎么建立信任、怎么促使下载。

场景一：先快速拉出一个未来页面的原型

Claude 完成这个任务，大约花了 3 分钟。

做新产品时，尤其在设计流程前期，我们通常不会一上来就抠布局细节、配色微差、动画节奏。更常见的需求是：先把方向拉出来，先看看这个产品页面大致会长成什么样。

而这恰恰是 AI 很适合接手的环节。

因为这时候，我们并不需要一次就命中最终答案。我们更需要的，是一个足够快的初稿，用来帮自己看方向、找感觉、判断值不值得往下做。

所以，先把 Claude Code 打开。

如果你还没装 Claude Code，先装上

如果你本机还没有安装 Claude Code，其实也很简单，直接打开终端输入命令就行。

如果你用的是 Mac：

curl -fsSL https://claude.ai/install.sh | bash

如果你用的是 Windows：

curl -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 cards

Claude 会马上接着当前上下文继续工作，而且它会把自己打算改哪些部分展示给你看。你甚至能看到代码层面的 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