AI 应用前端后端代码生成【免费下载链接】open-lovable Clone and recreate any website as a modern React app in seconds项目地址https://gitcode.com/gh_mirrors/op/open-lovable点击查看免费下载open-lovable 是一套以火焰为视觉母题的开源 React 应用其设计系统沉淀在styles/design-system/目录中并由.cursor/rules/design-system.md规则文档约束 AI 协作与日常开发。本篇以该规则文档为骨架结合styles/下的真实源码完整讲解颜色系统P3 色彩空间 sRGB 回退、排版体系SuisseIntl 字族与 Type Scale、工具类、动画类、组件样式架构与构建优化读完即可独立用这套火系设计语言搭建可复制的页面与组件。一、规则文档定位什么时候该用哪套样式styles/design-system/.cursor/rules/design-system.md是一份面向开发与 AI 编码助手的设计系统使用规则核心给出两条硬性约定已有页面继续使用 styles/main.css避免破坏存量视觉。Dashboard v2 页面在 layout 中引入styles/dashboard.css。需要说明的是从当前仓库styles/目录的实际文件结构看仅存在 styles/fire.css、styles/main.css 以及additional-styles/、components/、design-system/等子目录并未包含dashboard.css文件因此Dashboard v2 引入 dashboard.css应理解为规则文档对未来页面的预留约定当前仓库中新设计系统的真实入口是 styles/fire.css。从 fire.css 的头部注释可以确认这一点Fire Design System - New Firecrawl Design System / This is the new fire-inspired design system used in app and brand pages。fire.css 以import串起整套体系且注释明确要求ALL import statements must come FIRST before any other CSSdesign-system/base/reset.css、body.css、layout.css基础层design-system/fonts.css、colors.css、typography.css、animations.css、utilities.css核心层之后才注入 Tailwind 的三段指令而 styles/main.css 是旧体系的入口同样通过import ./fire.css引入火系设计系统再叠加 Tailwind 与 shadcn 风格的颜色令牌HSL 变量。两套入口在仓库中并行存在规则文档正是用来消除新旧页面到底用哪套的歧义。二、颜色系统CSS 自定义属性 P3 色彩空间规则文档要求使用 CSS 自定义属性并在 P3 色彩空间下获得更丰富的色彩表现同时强调所有颜色都有 sRGB 回退以兼容浏览器。具体色板分为四组Heat 火焰色--heat-4到--heat-100、--heat-200全部基于火焰橙rgba(250, 93, 25, …)派生数字表示不透明度百分比4/8/12/16/20/40--heat-100与--heat-200为实色。Accent 强调色--accent-black#262626、--accent-amethyst紫 #9061ff、--accent-bluetron蓝 #2a6dfb、--accent-crimson红 #eb3424。Alpha 变体--black-alpha-1至--black-alpha-88覆盖 1% 到 88% 不透明度、--white-alpha-56/72。UI 颜色边框--border-faint/muted/loud、插画--illustrations-*、背景--background-lighter/base、前景--foreground、--foreground-dimmer。源码级的双轨定义机制styles/design-system/colors.css 是这套色板的唯一事实来源其实现采用先 sRGB、后 P3 增强的双轨策略在:root中先定义全部变量的 sRGB 值如--heat-100: #fa5d19保证任何浏览器都能解析再用supports (color: color(display-p3 1 1 1))特性查询包裹 P3 版本见 colors.css 第 71 行起支持 P3 的显示器会覆盖为color(display-p3 0.980392 0.364706 0.098039 / 1)这类更广色域的值不支持则静默回退到 sRGB。这种写法的价值在于同一套 CSS 变量在不同设备上自动降级无需 JavaScript 判断也不会因为某个浏览器不支持color()函数而整块样式失效。规则文档中All colors have sRGB fallbacks for browser compatibility对应的正是这一实现。在组件中如何使用在任意组件样式中直接引用变量即可例如规则文档给出的按钮示例源码可参照 styles/components/button.css 中.button-primary的完整实现其 box-shadow 同样同时书写了 sRGB 与 P3 两组值.fire-button { background: var(--heat-100); color: var(--white); padding: 0.75rem 1.5rem; border-radius: 0.5rem; transition: all 0.3s ease; } .fire-button:hover { background: var(--accent-crimson); box-shadow: 0 0 40px rgba(250, 93, 25, 0.8); }与 Tailwind 的联动仓库在 tailwind.config.ts 中做了更深一层的集成读取根目录 colors.json把每个 key 映射为var(--key)注入 Tailwind 的theme.extend.colors因此--heat-100、--accent-crimson等变量可以直接以bg-heat-100、text-accent-crimson这类 Tailwind 类名使用变量命名即工具类命名无需手写内联样式。这解释了规则文档颜色系统用 CSS 自定义属性与Tailwind v3 通过 content paths 清理两条规则如何协同工作。三、排版系统字族、权重与 Type Scale字体族规则文档规定两套字体Display 字体SuisseIntl字重 400、450、500、600、700Mono 等宽字体系统等宽栈SF Mono / Monaco / Inconsolata 等。styles/design-system/typography.css 中为 SuisseIntl 声明了 5 个font-face400/450/500/600/700均指向/fonts/SuisseIntl/*.woff2并带font-display: swap随后在:root定义字体栈变量:root { --font-sans: SuisseIntl, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; --font-mono: SF Mono, Monaco, Inconsolata, Fira Code, Roboto Mono, Consolas, monospace; }规则文档只给了Mono: System monospace stack一句源码则补全了完整的回退链。另外styles/design-system/fonts.css 说明本项目在 Next.js 环境下通过 app/layout.tsx 的 font 加载机制引入 Geist/Inter/Roboto Mono并通过var(--font-geist-sans)、var(--font-geist-mono)、var(--font-inter)、var(--font-roboto-mono)暴露tailwind.config.ts的fontFamily也优先引用这些变量——这是字体预加载构建优化规则的实际落点。Type Scale 类规则文档列出的排版类全部有源码对应见 typography.css且每个语义类都配了一个text-前缀的工具类别名方便在 JSX 中直接使用分组类名字号 / 行高 / 字重源码实测标题.title-h1/.text-title-h14rem (64px) / 1.1 / 600标题.title-h2/.text-title-h22.25rem (36px) / 1.2 / 500标题.title-h3/.text-title-h31.875rem (30px) / 1.25 / 500标题.title-h4/.text-title-h41.375rem (22px) / 1.3 / 500标题.title-h5/.text-title-h51.125rem (18px) / 1.4 / 500正文.body-small~.body-x-large14px / 16px / 18px / 22px行高 1.5~1.6标签.label-small~.label-x-large15px / 16px / 18px / 22px字重 450带字距等宽.mono-small/.mono-medium/.mono-large12px / 14px / 16px使用var(--font-mono)值得注意的细节标签类使用450 这一介于常规与中等之间的字重这是 SuisseIntl 的特色字重配合font-face中的 450 声明使用正文/标题类统一text-wrap处理.text-balance/.text-pretty可改善长标题断行。响应式字号typography.css 末尾专门为max-width: 1024px断点重新校准了一批.text-*类的字号与行高例如.text-title-h2变为 36px/40px.text-body-large变为 18px/26px规则文档虽未展开但这是Type Scale 可落地的关键一环——同一套类名在桌面与平板自动切换组件层无需写媒体查询。四、工具类渐变、布局与效果规则文档的工具类清单在 styles/design-system/utilities.css 中全部有实现且多数比规则描述更完整。渐变Gradients四种渐变均基于色板变量组合用linear-gradient(135deg, …)实现.gradient-fire--heat-100 → --accent-crimson火焰橙到绯红最强烈的品牌渐变.gradient-heat--heat-20 → --heat-100同色系低透明到实色的细腻过渡.gradient-sunset--heat-100 → --accent-amethyst橙到紫的日落感.gradient-ocean--accent-bluetron → --accent-amethyst蓝到紫的冷色渐变。另有.text-gradient通过background-clip: text实现文字渐变并保留background-color: var(--heat-100)作为不支持 clip 时的回退。布局Layout.container-prosemax-width: 65ch居中用于长文阅读.center-absolute绝对定位 translate(-50%, -50%)的经典居中.stack-sm/md/lg/xl用 * *相邻选择器实现 0.5/1/2/3rem 的垂直间距.layout-sidebargrid-template-columns: var(--sidebar-width, 260px) 1fr的侧边栏模式1024px 以下自动折为单列。另外 styles/design-system/base/layout.css 还提供.container随 640~1536px 断点逐级加宽、.layout-grid/flex、.cluster、.switcher、.frame、.reel、.sr-only、.skip-link等布局原语规则文档中Layout一节的背后是一套完整的容器与组合布局体系。效果Effects.blur-backdropbackdrop-filter: blur(10px)-webkit-前缀毛玻璃背景.border-gradientposition: relative::before伪元素用双 maskmask-composite: xor实现 1px 渐变描边pointer-events: none保证不拦截点击.mask-fade-bottom/.mask-fade-edges线性/径向 mask 实现渐隐.focus-ringoutline: 2px solid transparent:focus-visible时点亮--heat-100是无障碍焦点态的实现.dotted-underline内嵌 SVG data URI 的重复点状下划线规则文档在 styles/fire.css 的layer utilities中还有一份变体底部偏移 -3px。此外 utilities.css 还补充了.heat-glow火焰光晕呼吸动画、.animate-shimmer骨架屏扫光、.scrollbar-thin细滚动条以及::selection使用--heat-20的选区配色等实用类。五、动画类从光标闪烁到火焰跃动styles/design-system/animations.css 集中定义了规则文档列出的全部动画类.cursor0.7s 的cursor-blink透明度闪烁用于命令行/生成场景的光标.animate-spin-reverserotate(360deg) → 0的反向匀速旋转.animate-flicker2s 的flicker关键帧透明度 1→0.8 并伴随scale(0.98)微缩放模拟火焰忽明忽暗.animate-glow2s 的glow关键帧box-shadow 半径 20px→40px 呼吸式发光火焰橙 rgba(250,93,25,…).transition-*transition-all/colors/transform/opacity统一 0.3s ease配套.delay-100~.delay-500与 utilities.css 中的.animation-delay-150~600两套延迟工具用于编排入场序列。这些动画在仓库的火焰主题组件中被大量复用例如 components/shared/effects/flame/ 下的火焰背景、爆炸粒子与英雄区效果均围绕--heat-*色板与上述动画类构建。六、实战从规则到组件的完整落地把规则文档的使用示例与源码结合可以拼出一条标准落地路径。以火焰按钮为例从 styles/components/button.css 的.button-primary可以看到生产级写法——它不仅用了变量还把 P3 双轨策略推进到了 box-shadow 层sRGB 与color(display-p3 …)两组阴影值并列.button-primary { background: #ff4c00; /* sRGB 回退 */ background: color(display-p3 0.9816 0.3634 0.0984); /* P3 增强 */ box-shadow: 0px -6px 12px 0px rgba(255, 0, 0, 0.2) inset, 0px 2px 4px 0px rgba(255, 77, 0, 0.12), /* …sRGB 阴影组 */ 0px 0.25px 0.25px 0px rgba(255, 77, 0, 0.2); box-shadow: 0px -6px 12px 0px color(display-p3 0.9804 0.1127 0.098 / 0.2) inset, 0px 2px 4px 0px color(display-p3 0.9804 0.3647 0.098 / 0.12), /* …P3 阴影组 */ 0px 0.25px 0.25px 0px color(display-p3 0.9804 0.3647 0.098 / 0.2); } .button-primary:hover { /* 阴影上浮营造按压前抬升感 */ } .button-primary:active { /* 阴影回落配合 scale 微缩 */ }写组件的推荐流程结构上先用 Type Scale 类定骨架标题用text-title-h2说明用text-body-medium辅助信息用text-label-small或text-mono-small配色一律引用var(--heat-*)/var(--accent-*)/var(--black-alpha-*)不要写死十六进制需要品牌氛围时叠加.gradient-fire、.animate-glow或.border-gradient交互反馈复用.focus-ring与.transition-colors保证可访问性长段落容器套.container-prosemax 65ch维持阅读宽度。七、组件 CSS 架构样式按组件归位规则文档约定组件专属样式放在styles/components/并点名 Button.css、Input.css、Modal.css 三个例子。当前仓库中 styles/components/ 目录实际包含index.css、button.css、code.css三个文件index.css作为汇总入口button.css已按上述火焰风格实现含完整 P3 阴影双轨code.css提供代码块样式。从仓库结构看Input/Modal 的样式并非以独立文件存在而是落在 styles/components/index.css 及 components/ui/ 的 shadcn 组件体系如 components/ui/input.tsx中——因此规则文档的目录约定应理解为组件样式按组件模块归位的架构原则落地时既可以新建独立文件也可以并入 index.css 按模块组织。八、构建优化PostCSS、Tailwind 清理与字体预加载规则文档的Build Optimization一节对应仓库中的真实工具链PostCSS 优化postcss.config.mjs 的插件顺序为postcss-import→postcss-nesting→tailwindcss→autoprefixer这正是 fire.css 中import指令能被解析、嵌套 CSS 能编译、厂商前缀能自动补全的底层保障Tailwind v3 清理tailwind.config.ts 的content覆盖pages/、components/、app/等目录含 JSX/TSX/MDX未使用的工具类会在构建时被 purge这与规则文档Tailwind v3 purging via content paths一致P3 自动回退色板层colors.css与组件层button.css都采用先 sRGB 后color(display-p3)supports查询的模式这是规则文档P3 color space with automatic sRGB fallbacks的全仓库统一实现字体预加载Next.js 在 app/layout.tsx 加载 Geist 等字体并以 CSS 变量暴露见 styles/design-system/fonts.css 的注释配合font-face的font-display: swap避免首屏字体闪烁。九、源码阅读指引想要深入这套火系设计系统按以下路径阅读即可快速建立全局认知规则文档styles/design-system/.cursor/rules/design-system.md新体系入口与导入顺序styles/fire.css旧页面入口styles/main.css色板sRGB P3 双轨styles/design-system/colors.css字体与 Type Scalestyles/design-system/fonts.css、styles/design-system/typography.css工具类与动画styles/design-system/utilities.css、styles/design-system/animations.css基础层styles/design-system/base/reset / body / layout组件层styles/components/button.css、styles/components/code.cssTailwind 与构建tailwind.config.ts、postcss.config.mjs、colors.json这套体系的本质是以变量为中心的单一事实来源颜色、字号、间距全部收敛到 CSS 自定义属性Tailwind 消费同一份变量组件只负责组合。遵循规则文档与上述源码模式即可在 open-lovable 中稳定产出视觉一致、可降级、可访问的火系界面。赞分享AI 应用前端后端代码生成【免费下载链接】open-lovable Clone and recreate any website as a modern React app in seconds项目地址https://gitcode.com/gh_mirrors/op/open-lovable点击查看免费下载相关推荐Primer CSS变量系统CSS自定义属性的完整指南Primer CSS变量系统CSS自定义属性的完整指南 Primer CSS变量系统是GitHub设计系统的核心它通过CSS自定义属性提供了一套完整的样式管前端设计系统UI组件小北xiaobei设计系统库实战Starbucks Siren 绿与第三空间美学的完整设计规范与 CSS Token 落地指南小北xiaobei设计系统库实战Starbucks Siren 绿与第三空间美学的完整设计规范与 CSS Token 落地指南 导读 本文围绕小北x人工智能AI Agent大模型AI 应用媒体生成复刻 Lovable 设计系统从设计令牌到 HTML/CSS 落地qm popular-web-designs 技能模板实战复刻 Lovable 设计系统从设计令牌到 HTML/CSS 落地qm popular web designs 技能模板实战 Lovable 以「温暖、纸后端人工智能AI Agent前端AI 技能上一篇如何用AI语音转换WebUI在10分钟内训练专业级语音模型完整实战指南下一篇Bilibili-Evolved字体加载事件监听加载完成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
