> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devin.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 每日设计系统审计

export const UseCaseHero = ({title, description, prompt, category, features, devinUrl, agent, intent, playbookId, type}) => {
  const encodedPrompt = encodeURIComponent(prompt || '');
  const tag = 'docs-use-case-gallery';
  const utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=hero-cta';
  const agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  const devinHref = type === 'schedule' ? 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + (prompt ? '&prompt=' + encodedPrompt : '') : type === 'review' ? 'https://app.devin.ai/review?' + utm : agent === 'ada' ? 'https://app.devin.ai/search?' + utm + '&noSubmit=true' + (prompt ? '&prompt=' + encodedPrompt : '') : devinUrl ? devinUrl.includes('?') ? devinUrl + '&' + utm + agentParams : devinUrl + '?' + utm + agentParams : prompt ? 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encodedPrompt : 'https://app.devin.ai/?' + utm + agentParams;
  const buttonLabel = type === 'schedule' ? 'Schedule in Devin ↗' : type === 'review' ? 'Set Up Devin Review ↗' : agent === 'advanced' ? 'Try in Devin ↗' : agent === 'dana' ? 'Try in Dana ↗' : agent === 'ada' ? 'Try in Ask Devin ↗' : 'Try in Devin ↗';
  const featureList = features ? features.split(',').map(f => f.trim()) : [];
  return <div className="uc-hero">
      <div className="uc-hero-inner">
        <div className="uc-hero-left">
          <h1 className="uc-hero-title">{title}</h1>
          <p className="uc-hero-desc">{description}</p>
          <div>
            <a href={devinHref} target="_blank" rel="noopener noreferrer" className="try-in-devin-btn">
              {buttonLabel}
            </a>
          </div>
        </div>
        <div className="uc-hero-meta">
          <div className="uc-meta-item">
            <span className="uc-meta-label">Author</span>
            <span className="uc-meta-value">Cognition</span>
          </div>
          <div className="uc-meta-item">
            <span className="uc-meta-label">Category</span>
            <span className="uc-meta-value">{category}</span>
          </div>
          {featureList.length > 0 && <div className="uc-meta-item">
              <span className="uc-meta-label">Features</span>
              <span className="uc-meta-value">{featureList.join(', ')}</span>
            </div>}
        </div>
      </div>
    </div>;
};

export const PromptBlock = ({children, type, agent, intent, playbookId}) => {
  var utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=prompt-block';
  var tag = 'docs-use-case-gallery';
  var agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  var label = type === 'schedule' ? 'Schedule in Devin' : type === 'playbook' ? 'Create Playbook' : type === 'knowledge' ? 'Add to Knowledge' : agent === 'advanced' ? 'Try in Devin' : agent === 'dana' ? 'Try in Dana' : agent === 'ada' ? 'Try in Ask Devin' : 'Try in Devin';
  var buildUrl = function (text) {
    var encoded = encodeURIComponent(text);
    if (type === 'schedule') return 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + '&prompt=' + encoded;
    if (type === 'playbook') return 'https://app.devin.ai/settings/playbooks/create?' + utm + '&body=' + encoded;
    if (type === 'knowledge') return 'https://app.devin.ai/knowledge?' + utm + '&body=' + encoded;
    if (agent === 'ada') return 'https://app.devin.ai/search?' + utm + '&noSubmit=true&prompt=' + encoded;
    return 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encoded;
  };
  const ref = React.useRef(null);
  const [href, setHref] = React.useState('#');
  React.useEffect(() => {
    if (!ref.current) return;
    var codeEl = ref.current.querySelector('pre code');
    if (codeEl) {
      var text = codeEl.textContent.trim();
      if (text) setHref(buildUrl(text));
    }
    var header = ref.current.querySelector('[data-component-part="code-block-header"]');
    if (header && !header.querySelector('.prompt-block-devin-link')) {
      var link = document.createElement('a');
      link.href = href;
      link.target = '_blank';
      link.rel = 'noopener noreferrer';
      link.className = 'prompt-block-devin-link';
      link.style.cssText = 'display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#fff;font-size:11px;font-weight:500;padding:4px 10px;border-radius:6px;white-space:nowrap;background:#317CFF;transition:background 0.2s;margin-left:8px;';
      link.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg> ' + label;
      link.onmouseenter = function () {
        link.style.background = '#2968D9';
      };
      link.onmouseleave = function () {
        link.style.background = '#317CFF';
      };
      header.appendChild(link);
    }
    var existingLink = ref.current.querySelector('.prompt-block-devin-link');
    if (existingLink && href !== '#') existingLink.href = href;
  });
  return <div className="prompt-block" ref={ref}>{children}</div>;
};

<UseCaseHero title="每日设计系统巡检" description="调度 Devin 扫描已合并的 PR，标记所有硬编码颜色和缺失的设计 token。" prompt="检查过去 24 小时内合并的所有前端 PR。逐一排查是否存在违反设计系统规范的情况——例如硬编码颜色、非标准间距、缺失的设计 token，或未使用我们共享组件库的组件。对于每个违规项，在 Linear 中创建一个带有「design-fix」标签的工单。" category="自动化" features="计划任务, 集成" type="schedule" />

<div className="uc-detail-wrapper">
  <Tip>不想手动完成这些设置？将本页链接粘贴到 Devin session 中，让它帮你完成所有配置。</Tip>

  <Steps>
    <Step title="让 Devin 学习并掌握你的设计系统">
      扫描器的效果取决于它所检查的规则质量。与其自己编写 Knowledge 条目，不如将 Devin 指向你的设计系统源代码文件，让它自动生成 Knowledge。

      打开一个新的 [Devin session](https://app.devin.ai/?utm_source=docs\&utm_medium=use-case-gallery)，并粘贴如下提示：

      <PromptBlock agent="advanced" intent="create">
        ```txt Learn our design system and create Knowledge theme={null}
        Read our design system source files:
        - src/tokens/colors.ts (color palette and token names)
        - src/tokens/spacing.ts (spacing scale and grid rules)
        - src/components/ui/ (shared component library)

        Also read any README or documentation files in those directories.

        From what you learn, create Knowledge entries for each of these
        categories:

        1. Color tokens — which tokens exist, naming conventions, and that
           raw hex/rgb/hsl values are never allowed
        2. Spacing grid — the 4px grid system, available spacing tokens,
           and that hardcoded pixel values are forbidden
        3. Component library — which shared components exist, when to use
           each one, and that one-off alternatives are not allowed

        Set each entry’s trigger to fire when working with frontend code
        in this repo. Pin them to the acme/webapp repository.
        ```
      </PromptBlock>

      Devin 会读取这些源代码文件，提取规则，并创建类似下面这样的 Knowledge 条目：

      * **Color tokens** — *"所有颜色都必须使用 `src/tokens/colors.ts` 中的 token。绝不能使用原始的十六进制值，例如 `#3B82F6`。请改用 `colors.primary.500`。"*
      * **Spacing grid** — *"所有间距都必须遵循我们的 4px 栅格系统。使用 `src/tokens/spacing.ts` 中的间距 token (例如，`spacing.2` = 8px，`spacing.4` = 16px) 。绝不要硬编码像 `margin: 10px` 这样的像素值。"*
      * **Component library** — *"始终使用 `src/components/ui/` 中的共享组件——包括 `<Button>`、`<Avatar>`、`<Modal>` 和 `<Card>`。不要创建一次性替代组件。"*

      在 **Settings > Knowledge** 中查看生成的条目，并在继续之前微调措辞或触发条件。
    </Step>

    <Step title="连接 Linear 用于创建工单">
      每日扫描会为其发现的每个违规在 Linear 中创建工单，因此在设置计划之前先连接 Linear。

      1. 前往 **Settings > Connections > Linear** 并点击 **Connect**
      2. 授权 Devin，并选择它可访问的团队
      3. 在 Linear 中创建一个名为 **"Design Debt"** 的项目
      4. 创建一个名为 **"design-fix"** 的标签——你将在最后一步使用它来触发自动修复

      完整的设置指南请参见 [Linear 集成](/zh/integrations/linear)。
    </Step>

    <Step title="设置每日扫描计划">
      前往 **Settings > Schedules**，然后点击 **Create schedule**。按如下方式进行配置：

      * **Name**: Design system scanner
      * **Schedule type**: Recurring
      * **Frequency**: Daily at 9:00 AM (你团队所在的时区)
      * **Agent**: Devin
      * **Email notifications**: Always (这样你每天早上都能看到结果)

      将以下内容粘贴为提示词：

      <PromptBlock type="schedule">
        ```txt 每日设计系统扫描 theme={null}
        Review all frontend PRs merged in the last 24 hours in the
        acme/webapp repo. For each PR, check the diff for:

        1. Hardcoded color values (hex, rgb, hsl) instead of tokens
           from src/tokens/colors.ts
        2. Non-standard spacing that doesn't follow our 4px grid
        3. New components that duplicate existing ones in
           src/components/ui/
        4. Missing responsive breakpoints for any new layout code

        For each violation, create a Linear ticket in the "Design Debt"
        project with:
        - The "design-fix" label
        - File path and line number
        - What the violation is and how to fix it
        - The name of the person who authored the violating change
          (from the PR author or git blame)

        Skip files in src/vendor/ and src/legacy/ — those are
        intentional exceptions.
        ```
      </PromptBlock>

      你也可以直接在输入框中创建：输入你的提示词，点击 **three-dot menu** (⋯)，然后选择 **Schedule Devin**。更多详情参见 [Scheduled Sessions](/zh/product-guides/scheduled-sessions)。

      每天早上扫描完成后，你会在 “Design Debt” 项目中看到类似这样的工单：

      | Ticket | File                             | Violation      | Suggested fix                            |
      | ------ | -------------------------------- | -------------- | ---------------------------------------- |
      | DD-101 | `src/pages/Settings.tsx:42`      | 硬编码 `#3B82F6`  | 将其替换为 `colors.primary.500`               |
      | DD-102 | `src/components/UserCard.tsx:18` | 自定义头像组件        | 使用 `src/components/ui/` 中的 `<Avatar>` 组件 |
      | DD-103 | `src/pages/Dashboard.tsx:95`     | `margin: 10px` | 使用 `spacing.3` (12px，最接近的 4px 网格值)       |
      | DD-104 | `src/views/Profile.tsx:33`       | 缺少移动端断点        | 为网格布局添加 `md:` 断点                         |
    </Step>

    <Step title="通过自动修复 PR 完成闭环">
      一旦你信任扫描器的输出结果，就可以修改提示词，让 Devin 在同一次运行中顺带修复违规问题——无需额外触发步骤。只需在扫描提示词的末尾添加一个修复步骤：

      <PromptBlock type="schedule">
        ```txt Daily design system scan with auto-fix theme={null}
        Review all frontend PRs merged in the last 24 hours in the
        acme/webapp repo. For each PR, check the diff for:

        1. Hardcoded color values (hex, rgb, hsl) instead of tokens
           from src/tokens/colors.ts
        2. Non-standard spacing that doesn't follow our 4px grid
        3. New components that duplicate existing ones in
           src/components/ui/
        4. Missing responsive breakpoints for any new layout code

        For each violation:
        - Create a Linear ticket in the "Design Debt" project with the
          "design-fix" label, file path, line number, description, and
          the name of the person who authored the violating change
        - Fix the violation following the design system rules in Knowledge
        - Group all fixes into a single PR per original PR, linked to the
          Linear tickets

        Skip files in src/vendor/ and src/legacy/ — those are
        intentional exceptions.
        ```
      </PromptBlock>

      现在整个闭环可以全程自动运行：**扫描** → **创建工单 + 修复 PR** → **审核**。每天早上，你都能同时看到违规报告以及对应的修复 PR。

      要生成一份每周违规汇总报告，可以运行下面这个后续提示词：

      <PromptBlock>
        ```txt Weekly design debt report theme={null}
        Summarize all design system violations found this week. Group by
        violation type and show which files and components are the worst
        offenders. Post the report to #design-system in Slack.
        ```
      </PromptBlock>
    </Step>
  </Steps>
</div>