可视化 UI 提示词生成器
构建具有活字印刷,颜色,间距,半径控制的视觉方向. 复制精确的 UI 提示词 或下载 CSS 变量。
调整细节。 见他们活着。
界面预览
序言给点空间
新的东西。
实践陶瓷车间. 好伴儿,一点粘土,星期六慢一点
演播室会话
2小时8个名额
说明性预览. 您的构建者执行最终接口 。
你的设计方向
UI design direction
Typography
Use Inter. Body text: 16px with 1.5 line height. Use a clear heading hierarchy and readable line lengths.
Palette
Background: #faf8f5. Text: #292521. Accent: #c65324. Text on accent: #000000. Check contrast for all final text and interactive states.
Layout and surfaces
Use 24px as the main panel padding and section gap, with a 4px spacing base. Corner radius: 12px. Surface shadow: 0 2px 12px rgb(0 0 0 / 0.06). Keep borders subtle and reuse existing components.
Responsive behavior
Stack panels on narrow screens. Keep controls within the viewport and interactive targets at least 44px. Preserve content order and visible keyboard focus. Respect reduced motion.
Implementation
Apply this direction to the requested screen using the project's existing architecture. Include relevant loading, empty, error, and success states. Do not add unrelated features.
导出文本保留英文格式；您输入的内容保持不变。
没有注册。 没有AI的信用。 此工具将您在浏览器中的输出组装 。
从一个想法到有用的东西。
- 01
从预设开始,然后调整细节.
- 02
检查您在现场界面预览中的选择 。
- 03
复制设计简报或下载您的 CSS 变量。
有点背景
将视觉偏好变成实用的交接方式 Lovable, Bolt, v0,或者你的编码代理。 预览和 提示词 使用相同的设置,因此您选择的间隔、类型和颜色保持一致。 此工具集合了您选择的指令; 它不使用AI分析或生成设计 。
问得好
我能用一下吗? 提示词 在任何应用程序构建者?
对 输出描述标准接口属性,并作为设计方向工作 Lovable, Bolt, v0,还有编码助理。 你的建筑师仍然决定如何执行它们.
列入本表的内容 CSS 下载?
一小组 CSS 用于您的口音颜色、背景、文字、字体、间距、半径和阴影的自定义属性。 在项目中使用之前, 将它们映射到您已有的设计符号 。
预览会检查无障碍吗 ?
工具报告您的口音与其按钮文本之间的对比 。 这是一个狭义的颜色检查,而不是一个完整的无障碍审计. 测试与键盘和辅助技术的最终接口也.