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

# Auditoría diaria del sistema de diseño

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="Auditoría diaria del sistema de diseño" description="Programa a Devin para que analice los PR ya integrados y señale colores codificados de forma fija y tokens faltantes." prompt="Revisa todos los PR de frontend integrados en las últimas 24 horas. Comprueba cada uno en busca de incumplimientos del sistema de diseño — colores codificados de forma fija, espaciado no estándar, tokens de diseño faltantes o componentes que no usen nuestra biblioteca de componentes compartida. Para cada incumplimiento, crea un ticket en Linear con la etiqueta &#x22;design-fix&#x22;." category="Automatizaciones" features="Programaciones, Integraciones" type="schedule" />

<div className="uc-detail-wrapper">
  <Tip>¿No quieres configurarlo manualmente? Pega un enlace a esta página en una sesión de Devin y pídele que lo configure todo por ti.</Tip>

  <Steps>
    <Step title="Permite que Devin aprenda tu sistema de diseño">
      El escáner solo es tan bueno como las reglas con las que compara. En lugar de escribir tú mismo las entradas de Knowledge, dirige Devin a los archivos fuente de tu sistema de diseño y deja que genere Knowledge automáticamente.

      Abre una nueva [sesión de Devin](https://app.devin.ai/?utm_source=docs\&utm_medium=use-case-gallery) y pega un prompt como este:

      <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 lee los archivos fuente, extrae las reglas y crea entradas de Knowledge como estas:

      * **Color tokens** — *"Todos los colores deben usar tokens de `src/tokens/colors.ts`. Nunca uses valores hexadecimales directos como `#3B82F6`. Usa `colors.primary.500` en su lugar."*
      * **Spacing grid** — *"Todo el espaciado debe seguir nuestra cuadrícula de 4 px. Usa los tokens de espaciado de `src/tokens/spacing.ts` (por ejemplo, `spacing.2` = 8px, `spacing.4` = 16px). Nunca escribas valores de píxeles fijos como `margin: 10px`."*
      * **Component library** — *"Usa siempre los componentes compartidos de `src/components/ui/` — incluidos `<Button>`, `<Avatar>`, `<Modal>` y `<Card>`. No crees alternativas puntuales."*

      Revisa las entradas generadas en **Settings > Knowledge** y ajusta cualquier redacción o disparador antes de continuar.
    </Step>

    <Step title="Conectar Linear para crear tickets">
      El escaneo diario crea tickets de Linear por cada infracción que detecta, así que asegúrate de conectar Linear antes de configurar la planificación.

      1. Ve a **Settings > Connections > Linear** y haz clic en **Connect**
      2. Autoriza a Devin y selecciona los equipos a los que debería tener acceso
      3. En Linear, crea un proyecto llamado **"Design Debt"**
      4. Crea una etiqueta llamada **"design-fix"** — la usarás para activar las correcciones automáticas en el último paso

      Consulta la [integración con Linear](/es/integrations/linear) para obtener la guía completa de configuración.
    </Step>

    <Step title="Programar el análisis diario">
      Navega a **Settings > Schedules** y haz clic en **Create schedule**. Configúralo de la siguiente manera:

      * **Name**: Design system scanner
      * **Schedule type**: Recurring
      * **Frequency**: Daily at 9:00 AM (zona horaria de tu equipo)
      * **Agent**: Devin
      * **Email notifications**: Always (para que veas los resultados cada mañana)

      Pega esto como prompt:

      <PromptBlock type="schedule">
        ```txt Escaneo diario del design system theme={null}
        Revisa todos los PR (pull request) de frontend fusionados en las últimas 24 horas en el
        repositorio acme/webapp. Para cada PR, revisa el diff en busca de:

        1. Valores de color hardcodeados (hex, rgb, hsl) en lugar de tokens
           de src/tokens/colors.ts
        2. Espaciado no estándar que no siga nuestra cuadrícula de 4px
        3. Componentes nuevos que dupliquen componentes existentes en
           src/components/ui/
        4. Breakpoints responsive faltantes para cualquier código de layout nuevo

        Para cada infracción, crea un ticket de Linear en el proyecto "Design Debt"
        con:
        - La etiqueta "design-fix"
        - Ruta del archivo y número de línea
        - Cuál es la infracción y cómo corregirla
        - El nombre de la persona que creó el cambio que infringe la regla
          (a partir del autor del PR o de git blame)

        Omite los archivos en src/vendor/ y src/legacy/ — esas son
        excepciones intencionales.
        ```
      </PromptBlock>

      También puedes crear esto directamente desde el cuadro de entrada: escribe tu prompt, haz clic en el **menú de tres puntos** (⋯) y selecciona **Schedule Devin**. Consulta [Scheduled Sessions](/es/product-guides/scheduled-sessions) para más detalles.

      Cada mañana, después de que se ejecute el escaneo, encontrarás tickets como estos en tu proyecto Design Debt:

      | Ticket | File                             | Violation               | Suggested fix                                                      |
      | ------ | -------------------------------- | ----------------------- | ------------------------------------------------------------------ |
      | DD-101 | `src/pages/Settings.tsx:42`      | Hardcoded `#3B82F6`     | Reemplazar con `colors.primary.500`                                |
      | DD-102 | `src/components/UserCard.tsx:18` | Custom avatar component | Usar `<Avatar>` de `src/components/ui/`                            |
      | DD-103 | `src/pages/Dashboard.tsx:95`     | `margin: 10px`          | Usar `spacing.3` (12px, valor más cercano en la cuadrícula de 4px) |
      | DD-104 | `src/views/Profile.tsx:33`       | No mobile breakpoint    | Agregar breakpoint `md:` para el grid layout                       |
    </Step>

    <Step title="Cierra el ciclo con PRs de corrección automática">
      Una vez que confíes en el resultado del escáner, modifica el prompt para que Devin corrija las infracciones en la misma ejecución, sin necesidad de un disparador separado. Añade un paso de corrección al final de tu prompt de escaneo:

      <PromptBlock type="schedule">
        ```txt Escaneo diario del sistema de diseño con corrección automática theme={null}
        Revisa todos los PR de frontend integrados en las últimas 24 horas en el
        repositorio acme/webapp. Para cada PR, revisa el diff para detectar:

        1. Valores de color codificados de forma fija (hex, rgb, hsl) en lugar de tokens
           de src/tokens/colors.ts
        2. Espaciado no estándar que no siga nuestra retícula de 4px
        3. Componentes nuevos que dupliquen componentes existentes en
           src/components/ui/
        4. Puntos de quiebre responsivos faltantes para cualquier código de layout nuevo

        Para cada infracción:
        - Crea un ticket de Linear en el proyecto "Design Debt" con la
          etiqueta "design-fix", la ruta del archivo, el número de línea, la descripción
          y el nombre de la persona que hizo el cambio infractor
        - Corrige la infracción siguiendo las reglas del sistema de diseño en Knowledge
        - Agrupa todas las correcciones en un solo PR por cada PR original, vinculado a los
          tickets de Linear

        Omite los archivos en src/vendor/ y src/legacy/ — esas son
        excepciones intencionales.
        ```
      </PromptBlock>

      Ahora todo el ciclo se ejecuta de forma automática: **escaneo** → **ticket + PR de corrección** → **revisión**. Cada mañana, tendrás tanto los reportes de infracciones como los PR que las corrigen.

      Para generar un resumen semanal de todas las infracciones encontradas, ejecuta esto como seguimiento:

      <PromptBlock>
        ```txt Informe semanal de deuda de diseño theme={null}
        Resume todas las infracciones del sistema de diseño encontradas esta semana. Agrupa por
        tipo de infracción y muestra qué archivos y componentes son los peores
        infractores. Publica el informe en #design-system en Slack.
        ```
      </PromptBlock>
    </Step>
  </Steps>
</div>