Kiln
Resumen del diseño
Kiln es el sitio web de una biblioteca de componentes de código abierto para desarrolladores de React, que presenta más de 40 componentes —incluidos botones, campos, tablas y selectores de fecha— como un muro funcional. Una mesa blanco frío, un esmalte pardo y superficies de extremo estampadas dan forma a una cuadrícula precisa y contenida.
Prompt
Producto: Kiln, una biblioteca de componentes de código abierto para desarrolladores de React con más de 40 componentes, incluidos botones, campos de entrada, menús desplegables, paletas de comandos, diálogos, información emergente, tablas y selectores de fecha. Admite personalización de temas.
Construye la página de inicio de su sitio web, opcionalmente con una página de detalle de componente:
- Muestra componentes reales e interactivos directamente en la página de inicio, no capturas. Un «muro de componentes» debe contener componentes funcionales que los usuarios puedan pulsar, en los que puedan escribir y que puedan cambiar.
- Toma como referencia la precisión y la contención de los principales sitios de herramientas para desarrolladores: predominantemente blanco y negro, como máximo un color de acento, una cuadrícula estricta y tipografía monoespaciada para código y números.
- Haz memorable un controlador de tema: arrastrar controles de radio, densidad o color de acento cambia todos los componentes de la página de inmediato.
- Incluye un comando de instalación copiable, fragmentos de código, navegación por categoría de componentes y cifras de uso realistas, como estrellas de GitHub y descargas semanales, evitando números excesivamente redondos.
Ver el prompt original en chino
产品:「Kiln」,一个给 React 开发者用的开源组件库:按钮、输入框、下拉、命令面板、弹窗、提示、表格、日期选择等 40 多个组件,支持主题定制。
做它的官网首页(可以加一个组件详情页):
- 首页要直接展示真实可交互的组件,而不是截图:一块“组件墙”里放着能点、能输入、能切换的真组件。
- 气质参考一线开发者工具官网的精确与克制:黑白为主,最多一种强调色,严格的网格,等宽字体用在代码和数字上。
- 记忆点:一个主题调节器,拖动圆角、密度或强调色,整页所有组件当场一起变化。
- 要有:安装命令(可复制)、代码片段、组件分类导航、一段真实的使用数据(例如 GitHub 星数、周下载量,数字不整齐)。
Abrir ejemplo interactivo