# 策展 · X (Twitter) 🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：Daniel (@DanielWhit21874) · 平台：X (Twitter) · 日期：2026-06-18

> 原始來源：https://x.com/DanielWhit21874/status/2067523823969128664

## 中文摘要

Daniel 以 compact-landing skill 解決 AI 網頁過度花俏的問題。這項工具專為 Agent 設計，旨在協助使用者快速建立精簡、具備高質感且強調行動呼籲（CTA）的產品登陸頁面。

**核心理念與功能**
Daniel 指出，目前 AI 生成的網頁往往充斥著雜亂的漸層與隨機發光效果，而「compact-landing」skill 則致力於回歸簡約。該工具強調「資訊優先」的設計邏輯，透過以下特點確保頁面品質：
- 採用精簡的排版變體與清晰的 CTA 層級。
- 使用低調且具高級感的字體設計。
- 以細線條取代嘈雜的卡片式設計，並提供穩定的動畫標籤與計數器。
- 具備觸覺回饋的控制項與指令欄位，提升互動體驗。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1781815517084-8ivdyivd.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/be946059c80b7672.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 影片展示了一個名為「compact-landing」的工具，能透過指令快速生成高品質的登陸頁面。

**安裝與使用方式**
該工具支援多種 AI Agent 環境，使用者可透過 CLI 進行安裝：
1. 若使用 `skills` CLI，執行指令：
   ```bash
   npx skills add Danilaa1/compact-landing-skill
   ```
2. 若使用 npm 安裝，執行：
   ```bash
   npx compact-landing install
   ```
安裝過程中，系統會詢問目標 Agent（支援 Codex、Claude Code、Cursor、Gemini），並可選擇安裝至全域或當前 `workspace`。安裝完成後，僅需向 Agent 下達指令：「Use compact-landing to create a premium compact landing page for this package.」，Agent 即會透過預設的精簡參數進行實作。

**技術背景與延伸**
此 skill 透過預先定義的「問題優先」工作流，在實作前會確認產品描述、CTA、佈局、主題與載入轉場等細節。根據 [compact-skill.dev](https://compact-skill.dev/) 的展示，該工具能生成如「Relay」等具備專業介面風格（如 Instrument、Console、Logger）的頁面，並透過穩定的微互動（如點擊回饋與平滑計數）提升整體質感。更多開發細節與技術規範可參考其 [GitHub 專案頁面](https://github.com/Danilaa1/compact-landing-skill)。

## 媒體內容

**影片展示了一個名為「compact-landing」的工具，能透過指令快速生成高品質的登陸頁面。**

**影片中的 Prompt 與操作**

Prompt（00:04）：

```
為我的背景作業佇列 Relay 建立一個高品質的登陸頁面。
```

原文：Build a premium landing page for Relay, my background-job queue.

操作步驟：

1. （00:04）輸入指令並送出
2. （00:08）顯示生成的登陸頁面結果
3. （00:15）展示微互動效果
4. （00:21）展示不同排版風格
5. （00:28）顯示安裝指令

## 標籤

Skills, Agent, Web, Claude