基础设施与平台 / 开发者工具

HashiCorp 风格

HashiCorp 呈现工程化双模(明亮与黑暗)调性,突出基础设施复杂度。

命令块日志面板密钥卡部署状态

原始 HTML 预览

直接使用 awesome-design-md 随 `DESIGN.md` 提供的 `preview.html`。

新窗口打开

适合项目

  • 开发平台
  • 数据库控制台
  • 运维看板
  • 平台化系统
  • 项目控制台

不适合项目

  • 短平快电商首页
  • 重品牌故事主线页面

复制入口

直接复制给 AI 工具;完整 DESIGN.md 从静态文件读取,不记录你的使用内容。

提示词预览

可复制提示词预览

复制前可以先核对三种提示词的语气和边界;完整规范仍保留在静态 DESIGN.md 中。

快速版

快速提示词

请使用 HashiCorp 启发的视觉风格生成页面:视觉更像专业产品而非模板,保持统一间距、清晰层级、克制高亮。适合放在前端 MVP 的主要界面结构。

Cursor 版

Cursor 提示词

Cursor 提示词(受 HashiCorp 启发):
1. 将整体 UI 风格设置为 HashiCorp 风格。
2. 深色优先或浅色优先请保留原风格氛围,不要使用真实品牌标志。
3. 使用紧凑布局、清楚分区、低视觉噪音和明确的组件状态。
4. 先生成页面骨架,再补齐文案与交互。

Claude Code 版

Claude Code 提示词

Claude Code 提示词(非官方 HashiCorp 启发版):
请基于 HashiCorp 风格创建前端页面。先输出文件结构,再给出关键组件的实现,使用语义化 class 与可复用设计令牌。请避免抄袭品牌专有资源。

同类风格

来源与许可

来源参考 awesome-design-md (MIT)。awesome-design-md (MIT)。非官方体系,仅供启发。

本页提供的完整规范可从 /design-md/hashicorp/DESIGN.md 复制下载。