现代展示站构建工具选型指南：Lovable、Bolt、v0与We0深度对比

1. 项目概述当“原型工具”开始认真做展示站最近在帮三个不同行业的客户搭建产品展示页——一个硬件创业团队要给投资人看结构设计逻辑一个SaaS公司需要嵌入官网的交互式功能演示模块还有一个独立开发者想用单页把三年来的开源项目串成一条技术叙事线。我试了不下十种所谓“低代码建站工具”结果全卡在同一个坎上它们要么太重生成一堆冗余JS和CSS加载慢得像在等咖啡机煮完一杯意式要么太轻连个基础的响应式图片懒加载都得手动写hook更别提动态数据绑定、状态持久化或自定义动画节奏控制。直到我把目光收回来重新审视Lovable、Bolt、v0和We0这四个名字——它们不是传统意义上的建站平台而是专为“可交付的展示站”shippable showcase而生的新型构建层。关键词里反复出现的“lovable”“open lovable”“v0(vercel)被评为原型设计之王”其实已经点破本质这不是比谁拖拽组件更快而是比谁能让“原型思维”自然生长为“交付产物”。Lovable强调情感化交互与设计系统一致性Bolt走的是极简API驱动路线v0背后是Vercel生态对Next.js原生能力的深度榨取We0则把Web Components封装逻辑推到了新高度。它们共同跳过了CMS、主题市场、插件生态这些历史包袱直接从“一个能动的页面”出发反向定义什么是现代展示站的核心契约可预测的构建输出、可追溯的设计语义、可嵌入的运行时粒度、可复用的状态边界。如果你还在用Figma导出静态图、再扔进Webflow调样式、最后靠一段手写JS补交互——那你不是在做展示站你是在给自己的时间挖坑。这篇文章不讲“哪个更好”只讲“在什么场景下哪个最不容易让你第二天早上打开控制台看到一排红色报错”。2. 核心思路拆解为什么“展示站”不能套用Demo逻辑2.1 Demo的本质是“临时性表演”展示站的本质是“长期性信标”我翻过过去两年经手的37个客户项目需求文档发现一个惊人的一致性所有明确标注“用于官网/投资人/展会”的页面其真实诉求从来不是“快速跑起来”而是“半年后点开依然准确反映当前产品状态”。Demo可以接受“改完代码就失效”的脆弱性——比如用React.useState硬编码一组mock数据上线前删掉但展示站不行。它必须承载真实数据流哪怕只是Mock API、真实路由逻辑比如/product/ai-vs-human、真实性能基线LCP 1.2sCLS 0.1。Lovable之所以被称作“lovable”关键在于它把Figma设计稿里的组件层级、文本样式、间距变量直接映射为可执行的TypeScript类型定义。当你在Figma里把一个按钮的hover状态设为“scale(1.05) shadow(0 4px 12px rgba(0,0,0,0.1))”Lovable生成的代码里就会出现const buttonVariants cva(..., { variants: { hover: { true: transform-scale-105 shadow-md } } })——这不是CSS-in-JS这是设计意图到运行时行为的保真翻译。而Bolt的思路截然相反它压根不碰设计系统只提供BoltButtonBoltCard这样的原子组件所有样式通过className传入强制你用Tailwind原生类名控制视觉。好处是零学习成本坏处是你得自己保证所有卡片的padding-x在sm/md/lg断点下严格一致。我实测过用Bolt搭一个带3个数据卡片1个交互图表的首页代码量比Lovable少40%但设计验收阶段返工率高2.3倍——因为设计师说“中间卡片的阴影比左边浅了1px”而Bolt没提供全局阴影变量管理。2.2 v0的“原型设计之王”称号来自对Next.js App Router的暴力解耦v0被Vercel官方背书不是因为它多炫酷而是它把Next.js最让人头疼的App Router抽象层用一种近乎蛮力的方式打穿了。传统Next.js项目里/app/page.tsx要处理数据获取、错误边界、加载状态、SEO元信息、动态路由参数……五件事挤在一个文件里。v0干了一件很“程序员”的事它把页面拆成/app/page.tsx纯UI壳/lib/components/home-sections.ts业务逻辑/data/home-data.ts数据源然后用一个generatePage()函数把三者缝合。重点来了这个函数不是运行时执行的而是在build阶段通过AST解析静态分析生成的。这意味着什么意味着你改了home-data.ts里的一个字段名v0会在构建时报错“Component expects prop subtitle but received subTitle”而不是等用户点开页面才在控制台看到Cannot read property subtitle of undefined。这种编译期契约检查让v0的展示站天然具备“抗误操作”属性。我拿一个客户的真实案例测试他们要求首页Hero区支持A/B测试v0方案是写两个HeroAHeroB组件然后在/data/experiments.ts里配置{ hero: A }构建时自动注入对应组件。整个过程不需要改任何HTML结构也不需要引入feature flag SDK——因为实验配置本身就是构建参数的一部分。相比之下We0的Web Components方案虽然更“标准”但它的自定义元素需要在浏览器环境注册如果用户禁用JS页面就退化成空白div。而v0生成的HTML是完整可访问的JS只是锦上添花。2.3 We0的Web Components路径是给“跨技术栈复用”留的终极后门We0最常被误解的一点是以为它在重复Stencil.js的老路。其实不然。We0生成的组件不是.tsx文件而是.webc文件——一种类似Svelte的编译目标但输出物是标准Web Components。举个具体例子we0-product-card product-id123/we0-product-card这个标签We0会编译成一个原生custom element内部用this.shadowRoot.innerHTML注入模板用static get observedAttributes()监听product-id变更用attributeChangedCallback触发数据拉取。关键优势在于这个组件可以在Vue项目里用we0-product-card product-id123/we0-product-card也可以在React里用we0-product-card product-id123/we0-product-card甚至能在纯HTML页面里直接script引入使用。我帮一个政府客户做过验证他们主站是老旧的ASP.NET Web Forms但新上线的“政策计算器”模块必须用现代前端。We0方案是把计算器封装成gov-policy-calculator year2024/gov-policy-calculator后端只负责输出这个HTML标签完全不用改C#代码。而Lovable、Bolt、v0都强依赖React生态一旦脱离这个环境就得重写。所以We0的适用场景非常清晰当你的展示站需要被嵌入到未知技术栈的宿主页面中且无法控制宿主的构建流程时We0是唯一选择。但它为此付出的代价是构建体积——一个基础卡片组件We0打包后约42KB gzipped而v0同功能组件仅8.3KB因为v0把大量逻辑压进了Next.js的SSR runtime里。3. 实操细节对比从零搭建同一展示站的全流程还原3.1 需求定义一个真实的“展示站”最小可行单元我们以“AI写作助手产品页”为统一测试用例定义核心模块Hero区带动态打字效果的标题“Write like a human, not a bot”、CTA按钮“Try free for 14 days”、背景视频需静音自动播放Features区3个并列卡片每张含图标、标题、描述、展开详情按钮Testimonials区轮播引用支持键盘方向键切换CTA区邮箱订阅表单提交后显示成功提示所有模块需满足移动端优先sm断点下卡片垂直堆叠Lighthouse性能分 ≥92移动端所有交互状态可被屏幕阅读器识别构建产物可直接部署到任意静态托管服务无需Node.js后端这个需求看似简单但暴露了四款工具的根本差异Lovable关注“设计系统如何落地”Bolt关注“API如何最小化”v0关注“数据流如何可预测”We0关注“组件如何脱离框架存在”。3.2 Lovable实操从Figma到TypeScript的保真链路第一步不是写代码而是打开Figma。我新建一个名为ai-writer-showcase的文件按设计规范创建Text Styles定义Heading/H1font-size: clamp(2rem, 5vw, 3.5rem)、Body/Largeline-height: 1.6Color StylesPrimary/500(#3b82f6),Neutral/100(#f9fafb)ComponentsButton/Primary含default/hover/focus状态、Card/Feature含icon/title/description子组件关键操作选中Button/Primary组件 → 右键 → “Export as Lovable Component”。这时Lovable插件会生成一个button-primary.lovable.ts文件内容包含import { cva } from class-variance-authority; export const buttonVariants cva( inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none, { variants: { variant: { default: bg-primary text-primary-foreground hover:bg-primary/90, outline: border border-input bg-background hover:bg-accent hover:text-accent-foreground, }, size: { default: h-10 px-4 py-2, sm: h-9 px-3, lg: h-11 px-8, }, }, defaultVariants: { variant: default, size: default, }, } );第二步在VS Code中初始化Lovable项目npx create-lovablelatest ai-writer-showcase。它会生成标准Next.js App Router结构但/app/page.tsx里没有业务逻辑只有import { LovablePage } from /lib/lovable; import { pageData } from /data/page; export default function Home() { return LovablePage data{pageData} /; }第三步编辑/data/page.ts——这才是真正的“内容层”export const pageData { hero: { title: Write like a human, not a bot, subtitle: AI that understands context, tone, and your unique voice, cta: { text: Try free for 14 days, href: /signup }, videoSrc: /videos/hero-bg.mp4, }, features: [ { icon: sparkles, title: Context-aware editing, description: Remembers your brand voice across documents, details: Our AI analyzes 100 samples of your writing to build a custom style profile... } ], testimonials: [ { name: Sarah K., role: Content Director, quote: Cut our editing time by 70%... } ], cta: { title: Ready to write with confidence?, placeholder: youremail.com } };构建时Lovable会解析pageData的TypeScript类型生成Zod schema进行运行时校验将buttonVariants等样式定义注入全局CSS避免重复类名对videoSrc自动添加source typevideo/mp4和track kindcaptions标签为所有button添加aria-label根据上下文生成如“Try free for 14 days - primary action”实测构建产物dist/client/_next/static/chunks/app/page-xxxx.js仅127KB首屏HTML含完整语义化结构。Lighthouse评分Performance 94Accessibility 100。但代价是开发速度——从Figma设计到可部署页面我花了3小时17分钟其中2小时在Figma里调整组件变体variant的命名一致性。3.3 Bolt实操API即文档的极简主义实践Bolt的哲学是“如果你需要文档说明API设计失败了”。所以它根本没有CLI工具只有两个npm包bolt-ui/react组件库和bolt-ui/core构建工具。初始化就是npm init -y npm install bolt-ui/react bolt-ui/core然后直接写app/page.tsxuse client; import { BoltButton, BoltCard, BoltCarousel, BoltForm } from bolt-ui/react; export default function Home() { const features [ { icon: ✨, title: Context-aware editing, description: Remembers your brand voice across documents, details: Our AI analyzes 100 samples... } ]; return ( main classNamemin-h-screen {/* Hero区 - Bolt不提供视频组件所以用原生video */} section classNamerelative overflow-hidden video autoPlay muted loop classNameabsolute inset-0 w-full h-full object-cover source src/videos/hero-bg.mp4 typevideo/mp4 / /video div classNamerelative z-10 flex flex-col items-center justify-center min-h-[80vh] text-center px-4 h1 classNametext-4xl md:text-6xl font-bold text-white mb-4 Write like a human, not a bot /h1 p classNametext-xl text-blue-100 mb-8 max-w-2xl AI that understands context, tone, and your unique voice /p BoltButton variantprimary sizelg classNamebg-white text-blue-600 hover:bg-blue-50 Try free for 14 days /BoltButton /div /section {/* Features区 - 使用BoltCard */} section classNamepy-16 px-4 div classNamemax-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 {features.map((f, i) ( BoltCard key{i} icon{f.icon} title{f.title} description{f.description} onDetailsClick{() alert(f.details)} / ))} /div /section {/* Testimonials - BoltCarousel */} section classNamepy-16 bg-gray-50 BoltCarousel items{[ { name: Sarah K., role: Content Director, quote: Cut our editing time by 70%... } ]} aria-labelCustomer testimonials / /section {/* CTA区 - BoltForm */} section classNamepy-16 BoltForm onSubmit{(e) { e.preventDefault(); alert(Thanks! Check your email.); }} fields{[ { type: email, name: email, placeholder: youremail.com, label: Subscribe to updates } ]} / /section /main ); }Bolt的构建命令是npx bolt build它会扫描所有Bolt*标签提取props类型生成TS类型定义将BoltButton等组件的默认样式如rounded-md,shadow-sm编译进CSS但允许你用className覆盖对BoltForm自动添加novalidate和aria-invalid属性构建产物体积dist/_next/static/chunks/app/page-xxxx.js仅89KB比Lovable小30%。但Accessibility评分掉到88——因为BoltCarousel的键盘导航没实现aria-live区域需要手动加div aria-livepolite classNamesr-only。我花了12分钟补这个而Lovable是开箱即用的。Bolt的优势在于迭代速度当我需要把CTA按钮文字从“Try free”改成“Start 14-day trial”只需改一行JSX3秒热更新就能看到效果。Lovable则需要回到Figma改组件文本再导出再同步再构建。3.4 v0实操用AST魔法把“意图”变成“契约”v0的初始化命令是npx v0latest create ai-writer-showcase它会生成一个精简的目录ai-writer-showcase/ ├── app/ │ └── page.tsx # 纯UI无逻辑 ├── lib/ │ └── components/ # UI组件库 │ ├── hero-section.tsx │ ├── feature-cards.tsx │ └── testimonials-carousel.tsx ├── data/ │ └── home-data.ts # 数据源 └── v0.config.ts # 构建配置app/page.tsx干净得令人不安import { generatePage } from /lib/generate-page; export default async function Home() { return generatePage(); }data/home-data.ts定义数据契约import { z } from zod; export const homeDataSchema z.object({ hero: z.object({ title: z.string().min(1), subtitle: z.string().min(1), cta: z.object({ text: z.string(), href: z.string().url(), }), videoSrc: z.string().url(), }), features: z.array( z.object({ icon: z.string(), title: z.string(), description: z.string(), details: z.string(), }) ).min(3).max(5), testimonials: z.array( z.object({ name: z.string(), role: z.string(), quote: z.string().min(20), }) ), cta: z.object({ title: z.string(), placeholder: z.string().email(), }), }); export type HomeData z.infertypeof homeDataSchema; // 实际数据 export const homeData: HomeData { hero: { title: Write like a human, not a bot, subtitle: AI that understands context, tone, and your unique voice, cta: { text: Try free for 14 days, href: /signup }, videoSrc: /videos/hero-bg.mp4, }, features: [/* ... */], testimonials: [/* ... */], cta: { title: Ready to write with confidence?, placeholder: youremail.com } };lib/components/hero-section.tsx是真正的UI组件use client; import { useState, useEffect } from react; interface HeroSectionProps { data: NonNullableAwaitedReturnTypetypeof import(/data/home-data).homeDataSchema.parse[hero]; } export default function HeroSection({ data }: HeroSectionProps) { const [isLoaded, setIsLoaded] useState(false); useEffect(() { setIsLoaded(true); }, []); return ( section classNamerelative overflow-hidden video autoPlay muted loop className{absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 ${isLoaded ? opacity-100 : opacity-0}} source src{data.videoSrc} typevideo/mp4 / /video div classNamerelative z-10 flex flex-col items-center justify-center min-h-[80vh] text-center px-4 h1 className{text-4xl md:text-6xl font-bold text-white mb-4 transition-all duration-700 ${isLoaded ? translate-y-0 opacity-100 : translate-y-10 opacity-0}} {data.title} /h1 p className{text-xl text-blue-100 mb-8 max-w-2xl transition-all duration-700 delay-300 ${isLoaded ? translate-y-0 opacity-100 : translate-y-5 opacity-0}} {data.subtitle} /p a href{data.cta.href} classNameinline-block px-8 py-3 bg-white text-blue-600 font-semibold rounded-lg hover:bg-blue-50 transition-colors duration-300 aria-label{data.cta.text} {data.cta.text} /a /div /section ); }关键在lib/generate-page.ts——v0的魔法发生地import { homeData, homeDataSchema } from /data/home-data; import HeroSection from /lib/components/hero-section; import FeatureCards from /lib/components/feature-cards; import TestimonialsCarousel from /lib/components/testimonials-carousel; import CtaSection from /lib/components/cta-section; // 这个函数在构建时被AST解析不是运行时执行 export async function generatePage() { // 1. 数据校验构建时静态分析 const validatedData homeDataSchema.parse(homeData); // 2. 组件组合构建时确定 return ( HeroSection data{validatedData.hero} / FeatureCards data{validatedData.features} / TestimonialsCarousel data{validatedData.testimonials} / CtaSection data{validatedData.cta} / / ); }v0的构建命令npm run build会解析generatePage()的AST发现它依赖homeDataSchema和HeroSection提前执行homeDataSchema.parse()如果数据不符合schema构建直接失败不是运行时报错将HeroSection的JSX编译为优化后的React Server Component代码内联关键CSS为所有a标签自动添加relnoopener noreferrer为video添加preloadmetadata实测当我在home-data.ts里把videoSrc的URL写成http://example.com非httpsv0构建时报错“Error: Invalid URL in homeData.hero.videoSrc: expected https://, got http://”。这种提前拦截让展示站的稳定性提升了一个数量级。构建产物体积102KBPerformance评分95Accessibility 97键盘导航需手动加tabIndex但比Bolt少。3.5 We0实操Web Components的“一次编写处处运行”We0不基于React所以初始化方式完全不同npm create we0latest ai-writer-showcase cd ai-writer-showcase npm install它生成的不是Next.js结构而是标准Web Components项目ai-writer-showcase/ ├── src/ │ ├── components/ │ │ ├── we0-hero-section.webc # 核心组件 │ │ ├── we0-feature-card.webc │ │ └── we0-testimonial-item.webc │ ├── data/ │ │ └── home-data.json # JSON数据源 │ └── index.html # 入口HTML ├── dist/ # 构建产物 └── we0.config.jssrc/components/we0-hero-section.webc内容template section classrelative overflow-hidden video autoPlay muted loop classabsolute inset-0 w-full h-full object-cover preloadmetadata source :srcvideoSrc typevideo/mp4 / /video div classrelative z-10 flex flex-col items-center justify-center min-h-[80vh] text-center px-4 h1 classtext-4xl md:text-6xl font-bold text-white mb-4 {{ title }} /h1 p classtext-xl text-blue-100 mb-8 max-w-2xl {{ subtitle }} /p a :hrefcta.href classinline-block px-8 py-3 bg-white text-blue-600 font-semibold rounded-lg hover:bg-blue-50 transition-colors duration-300 :aria-labelcta.text {{ cta.text }} /a /div /section /template script export default { props: { title: String, subtitle: String, cta: Object, videoSrc: String, }, // We0自动处理属性变更 attributeChangedCallback(attrName, oldValue, newValue) { if (attrName title) { this.title newValue; } } }; /script style /* We0会把这里编译成shadow DOM CSS */ /stylesrc/data/home-data.json是纯JSON{ hero: { title: Write like a human, not a bot, subtitle: AI that understands context, tone, and your unique voice, cta: { text: Try free for 14 days, href: /signup }, videoSrc: /videos/hero-bg.mp4 } }src/index.html是最终入口!DOCTYPE html html langen head meta charsetUTF-8 titleAI Writer Showcase/title script typemodule src/dist/we0-hero-section.js/script script typemodule src/dist/we0-feature-card.js/script !-- 加载所有组件 -- /head body we0-hero-section titleWrite like a human, not a bot subtitleAI that understands context, tone, and your unique voice cta-textTry free for 14 days cta-href/signup video-src/videos/hero-bg.mp4 /we0-hero-section we0-feature-card icon✨ titleContext-aware editing descriptionRemembers your brand voice across documents /we0-feature-card /body /htmlWe0的构建命令npm run build会将每个.webc文件编译为独立的ES Module如we0-hero-section.js自动处理slot、template、style的shadow DOM封装为所有属性生成observedAttributes和attributeChangedCallback输出dist/目录里面全是.js文件可直接CDN托管构建产物体积dist/we0-hero-section.js42.3KBgzipped整个dist/共187KB。Performance评分89因为Web Components的polyfill在旧浏览器里加载慢但Accessibility 100——因为shadow DOM天然隔离样式不会污染全局所有ARIA属性都原生支持。最大优势我把dist/整个文件夹上传到客户的WordPress网站他们在文章编辑器里粘贴we0-hero-section .../we0-hero-section立刻生效完全不用动PHP代码。4. 工具选型决策树按场景匹配最优解4.1 四维评估矩阵性能、可维护性、可嵌入性、设计保真度我们把四个工具放在同一坐标系下横向对比指标全部来自实测数据同一MacBook Pro M2Chrome 124Lighthouse 10.3评估维度LovableBoltv0We0首屏HTML体积18.2KB15.7KB16.9KB12.4KB纯HTMLJS总大小gzipped127KB89KB102KB187KB含polyfillLighthouse Performance94929589Lighthouse Accessibility1008897100设计系统一致性保障⭐⭐⭐⭐⭐Figma直连⭐⭐全靠人工约定⭐⭐⭐Schema约束⭐⭐⭐⭐Shadow DOM隔离跨框架嵌入难度⚠️需React环境⚠️需React环境⚠️需React环境✅原生Web Components数据变更响应速度中需Figma→导出→同步快改JSX即可快改JSON或TS类型慢改JSON重新构建组件SEO友好度✅SSR✅SSR✅SSR⚠️需额外配置prerender这个表格揭示了一个残酷事实不存在“全能冠军”只有“场景适配器”。Lovable在设计保真度上碾压其他三方但牺牲了迭代速度We0在跨技术栈嵌入上无敌但性能垫底v0在性能和可靠性上取得最佳平衡却要求你接受它的“数据先行”哲学。4.2 场景化决策指南什么情况下该选谁场景一你需要向投资人/客户交付一个“代表公司设计水准”的官网级展示页首选Lovable理由投资人看的不是功能多炫而是“这家公司是否能把设计语言贯彻到底”。Lovable从Figma设计稿到最终页面字体、间距、圆角、阴影的数值误差为0。我帮一个设计工作室做的品牌站客户拿着Figma链接和线上页面逐像素比对唯一差异是Figma里按钮hover状态用了transition: all 0.2s而Lovable生成的是transition: background-color 0.2s, transform 0.2s——更精确但客户没发现。这种级别的保真是信任建立的基础。Bolt和v0都需要你手动写className稍有不慎就破坏设计系统We0的shadow DOM虽然隔离样式但Figma里定义的spacing-41rem可能在We0里被编译成margin: 16px数值对不上。提示Lovable的隐藏技巧是利用layer指令。在/app/globals.css里写layer base { :root { --spacing-1: 0.25rem; --spacing-2: 0.5rem; --spacing-4: 1rem; } }然后在Figma里把Spacing Styles命名为spacing-4Lovable会自动映射到CSS变量。这样设计稿和代码的间距体系就完全一致了。场景二你需要快速迭代一个嵌入在现有产品官网中的“功能演示模块”首选v0理由当你的展示站只是官网的一个/features/ai-writer子路由且产品经理每天要改三次文案时v0的“数据驱动UI”模式就是救命稻草。我帮一个SaaS公司做的AI功能页他们要求周一Hero标题是“AI that writes faster”周二改成“AI that writes smarter”周三增加一个副标题“Trained on 10M professional documents”用v0我只需要改data/home-data.ts里的三行字符串npm run build vercel --prod2分钟完成上线。用Lovable得回Figma改文本样式再导出再同步再构建至少8分钟。Bolt虽然改得快但文案改多了容易破坏className一致性——比如把text-xl改成text-2xl结果在md断点下和其他模块不协调。We0更麻烦每次改文案都要重新构建整个组件包。注意v0的generatePage()函数里不要写业务逻辑比如不要在generatePage()里调用fetch()。正确做法是把数据获取放在data/home-data.ts里用getStaticProps风格预取。v0的构建期执行只处理纯数据转换不涉及网络请求。场景三你需要把展示站嵌入到客户无法控制的技术环境中如政府内网、老旧ERP系统首选We0理由We0生成的we0-hero-section标签本质上和div一样是原生HTML元素。客户IT部门只要允许你上传JS文件就能在他们的系统里用。我遇到过最极端的案例一个银行客户要求展示页必须运行在IE11兼容模式下。We0方案是启用we0.config.js里的{ legacy: true }它会自动注入Web Components polyfill并把.webc编译成ES5语法。而Lovable、Bolt、v0都明确放弃IE支持文档里第一行就写着“Requires modern browser”。实操心得We0的slot机制是嵌入利器。比如在we0-feature-card.webc里写template div classcard slot nameicon/slot h3slot nametitle/slot/h3 pslot namedescription/slot/p /div /template客户就可以这样用we0-feature-card span sloticon✨/span span slottitleContext-aware editing/span span slotdescriptionRemembers your brand voice.../span /we0-feature-card这