Usa una marca en tu código

Empieza aquí

En la carpeta de tu proyecto, ejecuta:

npx ideare init panaderia-la-miga

Cambia panaderia-la-miga por el nombre de la marca en la dirección de su página pública: la parte después de ideare.app/b/. No necesitas una cuenta.

El comando:

• detecta si el proyecto es Next.js (app/ o src/app/), Vite o HTML;
• muestra el nombre y el dominio de la marca, con el aviso "unverified", antes de escribir nada;
• lista cada archivo que va a agregar, reemplazar o cambiar, y guarda una copia de los tuyos en .ideare/backup/;
• pone los íconos, el manifiesto, la imagen para compartir, los colores y las tipografías, y agrega un @import marcado a tu CSS.

Después, haz commit de ideare.json, ideare.lock.json y los archivos.

Mantenla al día

• npx ideare pull trae la versión aprobada más nueva de la marca.
• npx ideare status te dice si hay una versión más nueva.
• npx ideare check falla cuando alguien edita a mano un archivo de la marca. Ejecútalo en CI.
• npx ideare login y npx ideare push envían cambios de vuelta. De quien no es dueño, un cambio se convierte en una propuesta que el dueño aprueba.
• npx ideare open abre la página pública de la marca.

Todos los comandos aceptan --yes (sin preguntas) y --json (para herramientas y agentes). Necesita Node 20.3 o más nuevo.

Sin cuenta, con el kit descargado

El botón "Descargar mi kit" de la página de inicio guarda un zip con el brand.json de tu marca. Para hacer todos los archivos en tu computadora a partir de él:

npx ideare init --local --from panaderia-la-miga-kit/brand.json

El formato de brand.json

Cada marca es un archivo, brand.json, en el formato 1. Todo lo demás (íconos, logos, imágenes, tokens) sale de él. Su JSON Schema está en https://ideare.app/schema/brand.v1.json, y editores como VS Code completan los campos cuando el archivo apunta a él en $schema.

Los campos: name, shortName, domain, locales, defaultLocale, copy, voice, mark, wordmark, colors, paints, fonts, radii, art, links. Los colores van en hex, con una versión clara y una oscura. Un CLI que recibe un formato más nuevo del que conoce lo rechaza y dice "Update ideare".

En el código

El kit que dibuja cada archivo es de código abierto (MIT): @ideare/kit. La API tiene un SDK, @ideare/sdk.

import { draftBrand, generate } from "@ideare/kit";