Add designlang extension

[Manavarya09]

Description

Adds designlang — an open-source CLI that reverse-engineers any website into a complete design system. The Raycast extension exposes the three most-used surfaces:

Command	What it does
Extract Design From URL	Run designlang on a URL, open the output folder when ready.
Score Website Design	Rate a site's design-system quality across 7 categories (A–F).
Copy CLI Command For URL	Copy npx designlang <url> to clipboard.

Why people will use this

designlang has 1.6k GitHub stars and 5K+ npm downloads. It outputs:

• A single agent-native DESIGN.md (8-section, YAML front matter, open spec)
• DTCG W3C tokens, Tailwind config, CSS variables, Figma variables
• Multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress)
• Component anatomy, motion tokens, brand voice JSON

For Raycast users who design or build UIs, this is "extract Stripe's design system in a single keystroke."

Implementation notes

• One preference (outputDir) — defaults to ~/designlang-output.
• extract and score are view commands that show progress + result inline.
• copy-cli is a no-view command (just copies to clipboard).
• Uses npx designlang under the hood — no system dependency beyond Node + npx (already required by Raycast for many extensions).

Screenshots

I'll add demo GIFs after a maintainer reviews the structure — happy to follow whatever format you prefer (1600×1000 PNGs in metadata/ per CONTRIBUTING.md, animated GIFs, or both).

Source

• Repository: https://github.com/Manavarya09/design-extract
• npm: https://www.npmjs.com/package/designlang
• Web: https://designlang.app

Happy to iterate on the README, command names, or preferences shape — first time contributing here so flag anything off-pattern.

[raycastbot]

Congratulations on your new Raycast extension! 🚀

We're currently experiencing a high volume of incoming requests. As a result, the initial review may take up to 10-15 business days.

Once the PR is approved and merged, the extension will be available on our Store.

[greptile-apps]

Greptile Summary

This PR adds a new designlang Raycast extension that exposes three commands — extract, score, and copy-cli — wrapping the npx designlang CLI. The implementation is clean and the previous issues (missing argument declaration, unused @raycast/utils dependency, manual Prefs type, extension title case) have all been resolved. One blocking issue remains: the metadata/ folder with Raycast-styled screenshots is absent, which is required for store submission when view-type commands are present.

Confidence Score: 4/5

Not safe to merge until the required metadata/ screenshots folder is added

One P1 finding (missing metadata folder, a hard Raycast store requirement for view commands) caps the score at 4. The two P2s (manual Arguments type, preference title case) are minor style issues that don't affect runtime behavior.

extensions/designlang/package.json — view-type commands require a metadata/ folder with screenshots before store submission

Important Files Changed

Filename	Overview
extensions/designlang/package.json	Missing required metadata/ screenshots folder for view-type commands; preference title not in Title Case
extensions/designlang/src/copy-cli.tsx	Argument declaration now present; manual LaunchProps type should use auto-generated Arguments.CopyCli
extensions/designlang/src/extract.tsx	Uses auto-generated Preferences.Extract type correctly; execFile callback pattern is acceptable
extensions/designlang/src/score.tsx	Logic is straightforward; ANSI-stripping regex is correct; no issues found
extensions/designlang/CHANGELOG.md	Correctly uses {PR_MERGE_DATE} placeholder per the standard Raycast convention

Prompt To Fix All With AI

This is a comment left during a code review.
Path: extensions/designlang/package.json
Line: 11-23

Comment:
**Missing `metadata/` folder with screenshots**

Both `extract` and `score` are `mode: "view"` commands. Per the Raycast store guidelines, every extension with view-type commands must ship a `metadata/` folder containing Raycast-styled screenshots (1600×1000 PNG). Without this folder the extension will be rejected during store review.

**Rule Used:** What: Extensions with view-type commands must incl... ([source](https://app.greptile.com/review/custom-context?memory=87059ac1-c601-487f-9f1c-bce8a3cb6209))

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: extensions/designlang/src/copy-cli.tsx
Line: 3

Comment:
**Manual Arguments type — use the auto-generated interface**

`{ arguments: { url?: string } }` is hand-written. Argument interfaces for `LaunchProps` are auto-generated in `raycast-env.d.ts` when the extension builds; use `Arguments.CopyCli` so the type stays in sync with `package.json` automatically.

```suggestion
export default async function Command(props: LaunchProps<Arguments.CopyCli>) {
```

**Rule Used:** What: Don't manually define `Preferences` for `get... ([source](https://app.greptile.com/review/custom-context?memory=d93fc9fb-a45d-4479-a6a4-b1b4af98ebc8))

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: extensions/designlang/package.json
Line: 43

Comment:
**Preference title should be Title Case**

`"Output directory"` should follow Title Case to match the convention for user-facing Raycast preference labels.

```suggestion
      "title": "Output Directory",
```

**Rule Used:** What: Use title case for titles in `package.json`.... ([source](https://app.greptile.com/review/custom-context?memory=a44fb089-4d03-4b60-a4ff-03431cdf0eb4))

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (2): Last reviewed commit: "Address Greptile review feedback" | Re-trigger Greptile}

[greptile-apps]

URL argument not declared — command always fails

props.arguments?.url is accessed here, but the copy-cli command has no arguments entry in package.json. Raycast only populates props.arguments for arguments explicitly declared in the manifest, so props.arguments?.url will always be undefined, the guard on line 5 will always fire, and the command will always toast "No URL provided" — it can never actually copy anything.

Add an arguments block to the copy-cli command in package.json:

{
  "name": "copy-cli",
  "title": "Copy CLI Command For URL",
  "description": "Copy `npx designlang <url>` to your clipboard.",
  "mode": "no-view",
  "arguments": [
    {
      "name": "url",
      "placeholder": "https://stripe.com",
      "type": "text",
      "required": true
    }
  ]
}

Prompt To Fix With AI

This is a comment left during a code review.
Path: extensions/designlang/src/copy-cli.tsx
Line: 3

Comment:
**URL argument not declared — command always fails**

`props.arguments?.url` is accessed here, but the `copy-cli` command has no `arguments` entry in `package.json`. Raycast only populates `props.arguments` for arguments explicitly declared in the manifest, so `props.arguments?.url` will always be `undefined`, the guard on line 5 will always fire, and the command will always toast "No URL provided" — it can never actually copy anything.

Add an `arguments` block to the `copy-cli` command in `package.json`:

```json
{
  "name": "copy-cli",
  "title": "Copy CLI Command For URL",
  "description": "Copy `npx designlang <url>` to your clipboard.",
  "mode": "no-view",
  "arguments": [
    {
      "name": "url",
      "placeholder": "https://stripe.com",
      "type": "text",
      "required": true
    }
  ]
}
```

How can I resolve this? If you propose a fix, please make it concise.

[Manavarya09]

Thanks for the thorough review @greptile-apps! All four findings addressed in the latest commit:

• P1 copy-cli arguments — added arguments block on the manifest with url (text, required, placeholder https://stripe.com).
• P1 @raycast/utils — removed from dependencies (it wasn't imported anywhere).
• P2 Manual Prefs type — switched to getPreferenceValues<Preferences.Extract>() so the type is sourced from the auto-generated raycast-env.d.ts.
• P2 Title case — title is now Designlang.
• Added CHANGELOG.md.

Re: the metadata/ screenshots — happy to add those, just confirm: are you OK with 4 PNGs at 1600×1000 covering the URL form, mid-extraction toast, the Score command's grade card, and the Copy CLI argument prompt? I'll capture from a real run as soon as you give the structural review a thumbs-up.

[greptile-apps]

Missing metadata/ folder with screenshots

Both extract and score are mode: "view" commands. Per the Raycast store guidelines, every extension with view-type commands must ship a metadata/ folder containing Raycast-styled screenshots (1600×1000 PNG). Without this folder the extension will be rejected during store review.

Rule Used: What: Extensions with view-type commands must incl... (source)

Prompt To Fix With AI

This is a comment left during a code review.
Path: extensions/designlang/package.json
Line: 11-23

Comment:
**Missing `metadata/` folder with screenshots**

Both `extract` and `score` are `mode: "view"` commands. Per the Raycast store guidelines, every extension with view-type commands must ship a `metadata/` folder containing Raycast-styled screenshots (1600×1000 PNG). Without this folder the extension will be rejected during store review.

**Rule Used:** What: Extensions with view-type commands must incl... ([source](https://app.greptile.com/review/custom-context?memory=87059ac1-c601-487f-9f1c-bce8a3cb6209))

How can I resolve this? If you propose a fix, please make it concise.