> ## 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.

# Daily Design System Audit

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="Daily Design System Audit" description="Schedule Devin to scan merged PRs and flag hardcoded colors and missing tokens." prompt="Review all frontend PRs merged in the last 24 hours. Check each for design system violations — hardcoded colors, non-standard spacing, missing design tokens, or components that don't use our shared component library. For each violation, create a Linear ticket with the 'design-fix' label." category="Automations" features="Schedules, Integrations" type="schedule" />

<div className="uc-detail-wrapper">
  <Tip>Don't want to set this up manually? Paste a link to this page into a Devin session and ask it to set everything up for you.</Tip>

  <Steps>
    <Step title="Have Devin learn your design system">
      The scanner is only as good as the rules it checks against. Instead of writing Knowledge entries yourself, point Devin at your design system source files and let it generate the Knowledge.

      Open a new [Devin session](https://app.devin.ai/?utm_source=docs\&utm_medium=use-case-gallery) and paste a prompt like this:

      <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 reads the source files, extracts the rules, and creates Knowledge entries like these:

      * **Color tokens** — *"All colors must use tokens from `src/tokens/colors.ts`. Never use raw hex values like `#3B82F6`. Use `colors.primary.500` instead."*
      * **Spacing grid** — *"All spacing must follow our 4px grid. Use spacing tokens from `src/tokens/spacing.ts` (e.g., `spacing.2` = 8px, `spacing.4` = 16px). Never hardcode pixel values like `margin: 10px`."*
      * **Component library** — *"Always use shared components from `src/components/ui/` — including `<Button>`, `<Avatar>`, `<Modal>`, and `<Card>`. Do not create one-off alternatives."*

      Review the generated entries in **Settings > Knowledge** and tweak any wording or triggers before moving on.
    </Step>

    <Step title="Connect Linear for ticket creation">
      The daily scan creates Linear tickets for each violation it finds, so connect Linear before setting up the schedule.

      1. Go to **Settings > Connections > Linear** and click **Connect**
      2. Authorize Devin and select the teams it should have access to
      3. In Linear, create a project called **"Design Debt"**
      4. Create a label called **"design-fix"** — you'll use this to trigger auto-fixes in the last step

      See [Linear integration](/integrations/linear) for the full setup guide.
    </Step>

    <Step title="Schedule the daily scan">
      Navigate to **Settings > Schedules** and click **Create schedule**. Configure it as follows:

      * **Name**: Design system scanner
      * **Schedule type**: Recurring
      * **Frequency**: Daily at 9:00 AM (your team's timezone)
      * **Agent**: Devin
      * **Email notifications**: Always (so you see results each morning)

      Paste this as the prompt:

      <PromptBlock type="schedule">
        ```txt Daily design system scan 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>

      You can also create this directly from the input box: type your prompt, click the **three-dot menu** (⋯), and select **Schedule Devin**. See [Scheduled Sessions](/product-guides/scheduled-sessions) for more details.

      Each morning after the scan runs, you'll find tickets like these in your Design Debt project:

      | Ticket | File                             | Violation               | Suggested fix                                  |
      | ------ | -------------------------------- | ----------------------- | ---------------------------------------------- |
      | DD-101 | `src/pages/Settings.tsx:42`      | Hardcoded `#3B82F6`     | Replace with `colors.primary.500`              |
      | DD-102 | `src/components/UserCard.tsx:18` | Custom avatar component | Use `<Avatar>` from `src/components/ui/`       |
      | DD-103 | `src/pages/Dashboard.tsx:95`     | `margin: 10px`          | Use `spacing.3` (12px, nearest 4px grid value) |
      | DD-104 | `src/views/Profile.tsx:33`       | No mobile breakpoint    | Add `md:` breakpoint for grid layout           |
    </Step>

    <Step title="Close the loop with auto-fix PRs">
      Once you trust the scanner’s output, modify the prompt to have Devin fix violations in the same run — no separate trigger needed. Add a fix step to the end of your scan prompt:

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

      Now the full loop runs hands-free: **scan** → **ticket + fix PR** → **review**. Every morning, you wake up to both the violation reports and the PRs that fix them.

      To generate a weekly summary of all violations found, run this as a follow-up:

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