介绍 /visual-plan：可扫描的Claude Code计划

Builder.io Blog 2026-06-28T18:21:15.059406

.css-1ptzami{position:-webkit-sticky;position:sticky;top:0;z-index:100;width:100%;padding:0 40px;background:rgba(10, 10, 10, 0.90);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--b-border-menu);box-sizing:border-box;}@media (max-width: 768px){.css-1ptzami{padding:0 20px;}}

.builder-brand-tokens {
/ ── Fonts ── /
--b-font-sans: 'Geist', system-ui, sans-serif;
--b-font-mono: 'Geist Mono', monospace;

/ ── Color primitives ── /
--c-violet-400: #A8C1FF;
--c-blue-100: #BEF0F5;
--c-blue-200: #7BE8F5;
--c-blue-300: #00DFF6;
--c-blue-400: #00D6F6;
--c-blue-500: #01C8F1;
--c-blue-500-40p: #01C8F166;
--c-blue-600: #009CCC;
--c-blue-900: #00161B;
--c-green-400: #0FDFBA;
--c-yellow-400: #DEC75F;
--c-red-400: #FFA27D;
--c-pink-400: #FA9BF2;
--c-neutral-50: #FAF9F5;
--c-neutral-100: #E0E0D7;
--c-neutral-200: #CAC9C6;
--c-neutral-400: #ABABAB;
--c-neutral-500: #9A9997;
--c-neutral-600: #5E5E5E;
--c-neutral-700: #3D3D3D;
--c-neutral-800: #2E2E2E;
--c-neutral-900: #1A1A1A;
--c-neutral-925: #0F0F0F;
--c-neutral-950: #0A0A0A;
--c-neutral-950-90p: #0A0A0AE6;
--c-white-5p: #FFFFFF0D;

/ ── Semantic: bg ── /
--b-bg-page: #0A0A0A;
--b-bg-surface: #0A0A0A;
--b-bg-raised: #0F0F0F;
--b-bg-prominent: #1A1A1A;
--b-bg-translucent: #0A0A0AE6;
--b-bg-alternative: #00161B;

/ ── Semantic: text ── /
--b-text-primary: #FAF9F5;
--b-text-secondary: #9A9997;
--b-text-muted: #5E5E5E;
--b-text-highlight: #E0E0D7;
--b-text-link: #BEF0F5;
--b-text-eyebrow: #01C8F1;

/ ── Semantic: border ── /
--b-border-default: #1A1A1A;
--b-border-subtle: #141414;
--b-border-title-row: #2E2E2E;
--b-border-menu: #1a1a1a;

/ ── Semantic: action ── /
--b-action-primary-bg: #01C8F1;
--b-action-primary-hover: #00DFF6;
--b-action-primary-text: #0A0A0A;
--b-action-primary-border: #00DFF6;
--b-action-primary-effect: #01C8F166;
--b-action-secondary-bg: transparent;
--b-action-secondary-hover: #1A1A1A;
--b-action-secondary-text: #FAF9F5;
--b-action-secondary-border: #5E5E5E;
--b-action-tab-bg: #0A0A0A;
--b-action-tab-bg-active: #00161B;
--b-action-tab-bg-hover: #0F0F0F;
--b-action-tab-text: #5E5E5E;
--b-action-tab-text-active: #BEF0F5;
--b-action-tab-text-hover: #FAF9F5;
--b-action-tab-indicator: #01C8F1;

/ ── Utility ── /
--b-btn-hover-bg: rgba(255, 255, 255, 0.08);

/ ── Border radius ── /
--b-radius: 6px;
--b-radius-none: 0px;
--b-radius-sm: 3px;
--b-radius-md: 6px;
--b-radius-lg: 12px;
--b-radius-full: 9999px;

/ ── Gradient ── /
--b-gradient-blue: linear-gradient(90deg, #18B4F4 0%, #19B9F5 6.25%, #1BBDF5 12.5%, #1CC2F6 18.75%, #1EC7F7 25%, #1FCBF7 31.25%, #21D0F8 37.5%, #22D5F9 43.75%, #24D9F9 50%, #25DEFA 56.25%, #26E3FB 62.5%, #28E8FC 68.75%, #29ECFC 75%, #2BF1FD 81.25%, #2CF6FE 87.5%, #2EFAFE 93.75%, #2FFFFF 100%);

/ ── Spacing scale (token key × 4px) ── /
--spacing-0: 0px;
--spacing-1: 4px;
--spacing-2: 8px;
--spacing-3: 12px;
--spacing-4: 16px;
--spacing-5: 20px;
--spacing-6: 24px;
--spacing-8: 32px;
--spacing-10: 40px;
--spacing-12: 48px;
--spacing-16: 64px;
--spacing-20: 80px;
--spacing-24: 96px;
--spacing-30: 120px;
--spacing-35: 150px;
--spacing-50: 200px;

/ ── Typography scale ── /
--b-t-heading-1: 56px;
--b-t-heading-2: 46px;
--b-t-heading-3: 37px;
--b-t-heading-4: 28px;
--b-t-heading-5: 23px;
--b-t-heading-6: 18px;
--b-t-paragraph-1: 18px;
--b-t-paragraph-2: 15px;
--b-t-paragraph-2-md: 15px;
--b-t-paragraph-3: 12px;
--b-t-label-1: 14px;
--b-t-label-2: 11px;
}

@media (max-width: 768px) {
.builder-brand-tokens {
--spacing-4: 12px;
--spacing-5: 16px;
--spacing-6: 20px;
--spacing-8: 24px;
--spacing-10: 24px;
--spacing-12: 24px;
--spacing-16: 24px;
--spacing-20: 32px;
--spacing-24: 32px;
--spacing-30: 72px;
--spacing-35: 88px;
--spacing-50: 80px;

--b-t-heading-1: 32px;
--b-t-heading-2: 28px;
--b-t-heading-3: 24px;
--b-t-heading-4: 22px;
--b-t-heading-5: 19px;
--b-t-heading-6: 16px;
--b-t-paragraph-1: 16px;
--b-t-paragraph-2: 15px;
--b-t-paragraph-3: 12px;
--b-t-label-1: 14px;
--b-t-label-2: 11px;

}
}

.builder-brand-tokens .blue-gradient {
background: var(--b-gradient-blue);
}

跳过主要内容

你的AI开发成熟度水平如何？参加测验

平台 资源 文档 企业版 定价

联系销售

开始构建

      .code-block {
        margin: 0 -20px;
        padding: 20px;
        box-shadow: none !important;
      }

      .code-block {
        background: #1e2129;
      }

      html.dark-mode .code-block {
        filter: invert(100%) hue-rotate(180deg);
        margin: 0 -20px;
        padding: 20px;
        background: black;
        border: 1px solid #222;
      }

      html.dark-mode .dark-mode-no-filter {
        filter: none !important;
      }

      html.dark-mode .dark-mode-no-filter-images img {
        filter: none !important;
      }

      .code-block pre {
        background-color: transparent !important;
      }

      html.dark-mode .dark-mode-hidden {
        display: none !important;
      }

      html:not(.dark-mode) .light-mode-hidden {
        display: none !important;
      }
    .css-9v20re{padding:50px;position:relative;width:100%;max-width:1270px;margin:0 auto;}@media (max-width: 800px){.css-9v20re{

查看原文