Diseñar con
Trae CLI en
OpenDesign.

docs-product-landing.html · 1440pxsearch · analyticssearch · analytics

4Revisión antes de la entrega

1. 1

   Descargue la app de escritorio de OpenDesign

   Elija el paquete para su ordenador, instálelo y abra la app.

   Descargar OpenDesign

   PUNTO DE CONTROL

   Se abre la aplicación de escritorio. ¿Ya está instalada? Continúe con el siguiente paso; no es necesario volver a descargarla.
2. 2

   Prepare su conexión de Trae CLI

   Siga las instrucciones de Trae CLI en su versión instalada. Autentíquese con su propia clave de proveedor de LLM (BYOK) — las credenciales permanecen en su máquina.

   Documentación de Trae

   # 1. Get Trae CLI (trae-agent) from source — needs uv
   git clone https://github.com/bytedance/trae-agent.git
   cd trae-agent
   uv sync --all-extras
   source .venv/bin/activate
   
   # 2. Authenticate by pointing it at your LLM provider key
   #    set it in the environment (or a trae_config.yaml file)
   export OPENAI_API_KEY=...        # or ANTHROPIC_API_KEY, GOOGLE_API_KEY, etc.

   De las notas de configuración de Trae CLI en la guía publicada; consulte la documentación del proveedor para conocer el comando actual.

   PUNTO DE CONTROL

   Confirme el agente y la cuenta previstos. Si no está disponible, verifique la compatibilidad antes de intentar una tarea más grande.
3. 3

   Ejecute una pequeña tarea de Trae CLI

   Use un briefing pequeño para poder evaluar todo el ciclo, incluida una revisión.

   Briefing inicial Copiar

   Construya una pantalla de configuración con un formulario de perfil y una confirmación de guardado. Use mis reglas de diseño. Compruébela en anchos de escritorio y móvil.

   PUNTO DE CONTROL

   Abra el resultado, pruebe el estado de guardado y solicite un cambio específico. Un archivo generado es el comienzo de la revisión, no el final.

Para ejecutar OpenDesign desde el código fuente, siga la guía de inicio técnica en su lugar.

1. 1

   Briefing de diseño

   Lenguaje sencillo, de tres a seis líneas. Indique el público, la función de la pantalla y las plataformas.

   • UstedEscriba el briefing; adjunte una captura de referencia si dispone de una.
   • Trae CLILee el briefing y el archivo de instrucciones del proyecto; pregunta cuando algo es ambiguo.
   • OpenDesignAporta el proyecto, la superficie de prompt y el skill para el tipo de artefacto.
   • ComprobarConfirme que el briefing indica los criterios de aceptación. Añadirlos ahora resulta más económico que hacerlo después de la generación.

   New project · PromptTrae CLI

   You

   Design the Docsmith landing page: hero, search demo, three benefits, logos. Check each pass in a real browser at 1440 and 390.

   Trae CLI

   Understood. Should the search demo be interactive or a static frame with a focus state? The brief says live-looking.
2. 2

   Restricciones de diseño

   Un design system y unas pocas reglas estrictas. Esto es lo que distingue un resultado fiel a la marca de un aspecto genérico.

   • UstedElija un design system; indique los breakpoints y los componentes de uso obligatorio, si los hay.
   • Trae CLICarga los tokens y las reglas de postura de DESIGN.md en el contexto antes de escribir una línea.
   • OpenDesignProporciona la biblioteca de design systems y vincula el elegido a la plantilla del skill.
   • ComprobarLos tokens coinciden con su marca. Un solo acento, las fuentes correctas, el radio correcto.

   DESIGN.md · OpenDesignbound

   background #fafafa foreground #262626 border #d9d9d9 accent #63fe13 display Albert Sans 800 radius 8px · pills 999px
3. 3

   Generar la interfaz

   Trae CLI escribe un archivo HTML autocontenido: estructura, estilos, interacciones y anclajes estables.

   • UstedEspere, o responda a una pregunta aclaratoria. No hay nada que configurar.
   • Trae CLIPlanifica las secciones, escribe el HTML, el CSS y el JavaScript, ejecuta el archivo y corrige lo que falle.
   • OpenDesignGuarda el artefacto en la carpeta del proyecto y lo indexa para la vista previa.
   • ComprobarNada todavía. Evalúe el archivo una vez renderizado, no a partir del código fuente.

   Project files3 files

   • docs-product-landing.htmlnew
   • trae_config.yamlbound
   • DESIGN.mdread
4. 4

   Vista previa

   El archivo se renderiza dentro de OpenDesign en los anchos que solicitaste. Aquí es donde se juzga el diseño.

   • UstedCambie de ancho, recorra las interacciones, deje comentarios en los elementos.
   • Trae CLILee sus comentarios sobre la vista previa y prepara la siguiente revisión.
   • OpenDesignRenderiza la vista previa, expone objetivos data-od-id para comentarios y ediciones.
   • VerificaciónJerarquía, contraste, desbordamiento a 390px, estados de foco, y si el acento se usa con moderación.

   Preview · 390pxComment mode

   Comment on · demo

   Static frame with a real focus state is enough; no fake typing animation.

   Comment on · logos

   Logo row scrolls on the phone; do not shrink logos below 24px.
5. 5

   Revisar y verificar

   Solicite cambios señalando elementos en la vista previa. Cada revisión es un archivo nuevo; nada se sobrescribe en silencio.

   • UstedConvierte comentarios en solicitudes; decide cuándo la tarea está terminada.
   • Trae CLIAplica los cambios directamente y vuelve a ejecutar el archivo.
   • OpenDesignMantiene las versiones lado a lado; exporta una imagen o el HTML cuando haya terminado.
   • VerificaciónVuelva a revisar solo el área que cambió, y luego toda la página una vez en cada punto de quiebre.

   Verification · v23 of 4

   • ✓Demo has a focus state
   • ✓Logo row scrolls at 390px
   • ✓No horizontal scroll at 390px
   • Browser pass at both widths — checked by you