Anthropic ਨੇ Terminal UI Mockups ਲਈ Claude Code ਵਿੱਚ /design Command ਜੋੜਿਆ ਹੈ

Anthropic ਨੇ Claude Code ਦਾ ਵਿਸਤਾਰ ਇੱਕ ਨਵੇਂ /design command ਨਾਲ ਕੀਤਾ ਹੈ, ਜੋ developers ਨੂੰ terminal ਤੋਂ ਬਾਹਰ ਨਾ ਨਿਕਲੇ UI mockups ਬਣਾਉਣ, ਉਹਨਾਂ ਵਿੱਚ ਸੁਧਾਰ ਕਰਨ ਅਤੇ ਦੇਖਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।

ਸਿੱਧਾ Terminal ਵਿੱਚ UI Prototyping

Figma ਅਤੇ shell ਦੇ ਵਿਚਕਾਰ ਭਟਕਣ ਦੀ ਬਜਾਏ, ਹੁਣ ਤੁਸੀਂ /design a few options for a login screen ਵਰਗੀ ਕੋਈ ਚੀਜ਼ ਟਾਈਪ ਕਰ ਸਕਦੇ ਹੋ। Claude ਕਈ interactive “artboards” ਨਾਲ ਜਵਾਬ ਦਿੰਦਾ ਹੈ ਜੋ high-fidelity mockups ਦਿਖਾਉਂਦੇ ਹਨ। ਤੁਸੀਂ layouts ਦੀ ਤੁਲਨਾ ਕਰ ਸਕਦੇ ਹੋ, ਆਪਣਾ ਮਨਪਸੰਦ ਚੁਣ ਸਕਦੇ ਹੋ, ਅਤੇ ਅਗਲੇ ਸਵਾਲ ਪੁੱਛ ਕੇ ਦਿੱਖ ਨੂੰ ਹੋਰ ਬਿਹਤਰ ਬਣਾ ਸਕਦੇ ਹੋ—ਇਹ ਸਭ production code ਦੀ ਇੱਕ ਲਾਈਨ ਲਿਖਣ ਤੋਂ ਪਹਿਲਾਂ ਹੀ ਹੋ ਜਾਂਦਾ ਹੈ।

ਤੁਹਾਡੇ Codebase ਤੋਂ Context-Aware Mockups

Developer Nate Parrott ਨੋਟ ਕਰਦੇ ਹਨ ਕਿ Claude ਅਸਲ ਵਿੱਚ ਮੌਜੂਦਾ repository ਨੂੰ ਪੜ੍ਹਦਾ ਹੈ। ਇਹ colour palettes, component libraries, ਅਤੇ layout conventions ਨੂੰ ਲੈਂਦਾ ਹੈ, ਅਤੇ ਫਿਰ ਹਰੇਕ design ਨੂੰ ਪ੍ਰੋਜੈਕਟ ਦੇ ਮੌਜੂਦਾ ਸਟਾਈਲ ਦੇ ਅਨੁਸਾਰ ਤਿਆਰ ਕਰਦਾ ਹੈ। ਨਤੀਜੇ “Artifacts” ਵਜੋਂ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ, ਜੋ Claude ਦੇ ਅੰਦਰ ਇੱਕ ਸਮਰਪਿਤ view ਹੈ ਜੋ ਵੱਖਰੇ graphics editor ਨੂੰ ਖੋਲ੍ਹੇ ਬਿਨਾਂ ਤਸਵੀਰਾਂ ਦਿਖਾਉਂਦਾ ਹੈ। ਇਸ ਪੜਾਅ 'ਤੇ mockups ਸਿਰਫ਼ Claude ਦੇ workspace ਵਿੱਚ ਹੁੰਦੇ ਹਨ; ਉਹਨਾਂ ਨੂੰ code ਵਿੱਚ ਬਦਲਣ ਤੋਂ ਪਹਿਲਾਂ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਨੂੰ file system ਵਿੱਚ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਸੇਵ ਕਰਨਾ ਪਵੇਗਾ।

AI-Assisted Development ਲਈ ਇਹ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ

ਇਹ command software development life cycle ਦੇ ਦੋ ਪੜਾਵਾਂ—design ਅਤੇ coding—ਨੂੰ ਇੱਕ ਵਿੱਚ ਜੋੜ ਦਿੰਦਾ ਹੈ। ਉਹ ਟੀਮਾਂ ਜੋ ਤੇਜ਼ੀ ਨੂੰ ਮਹੱਤਵ ਦਿੰਦੀਆਂ ਹਨ, ਉਹ ਇੱਕ ਸਿੰਗਲ prompt ਨਾਲ ਕਈ layout options ਤਿਆਰ ਕਰ ਸਕਦੀਆਂ ਹਨ, ਜਿਸ ਨਾਲ ਸ਼ੁਰੂਆਤੀ ਪੜਾਅ ਦੀ ਖੋਜ (discovery) ਤੇਜ਼ ਹੋ ਜਾਂਦੀ ਹੈ। ਕਿਉਂਕਿ Claude live codebase ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ mockups brand ਦੇ ਅਨੁਸਾਰ ਅਤੇ component system ਦੇ ਅਨੁਕੂਲ ਰਹਿੰਦੇ ਹਨ, ਜਿਸ ਨਾਲ generic image generation ਤੋਂ ਬਾਅਦ ਹੋਣ ਵਾਲੀ ਮੈਨੂਅਲ ਸਫਾਈ (cleanup) ਦਾ ਸਮਾਂ ਬਚਦਾ ਹੈ।

Anthropic ਇਸ ਨੂੰ ਇੱਕ “AI software engineer” ਵੱਲ ਇੱਕ ਕਦਮ ਵਜੋਂ ਦੇਖਦਾ ਹੈ ਜੋ logic ਅਤੇ aesthetics ਦੋਵਾਂ ਨੂੰ ਸੰਭਾਲ ਸਕਦਾ ਹੈ। ਜੇਕਰ terminal ਇੱਕ multi-modal workspace ਵਜੋਂ ਕੰਮ ਕਰ ਸਕਦਾ ਹੈ, ਤਾਂ code ਲਿਖਣ ਅਤੇ user experience ਨੂੰ ਰੂਪ ਦੇਣ ਦੇ ਵਿਚਕਾਰ ਦਾ ਫਰਕ ਬਹੁਤ ਘੱਟ ਜਾਵੇਗਾ।

ਮੌਜੂਦਾ ਸੀਮਾਵਾਂ

ਇਹ feature ਅਜੇ preview ਵਿੱਚ ਹੈ। ਤਿਆਰ ਕੀਤੇ ਗਏ mockups ਆਪਣੇ ਆਪ source files ਨਹੀਂ ਬਣਦੇ; ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਨੂੰ ਖੁਦ export ਅਤੇ integrate ਕਰਨਾ ਪਵੇਗਾ। ਉਹ ਵਾਧੂ ਕਦਮ ਸਮੇਂ ਦੀ ਬਚਤ ਨੂੰ ਘਟਾ ਸਕਦਾ ਹੈ, ਖਾਸ ਕਰਕੇ ਦਰਜਨਾਂ components ਵਾਲੇ ਵੱਡੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ।

ਇਸ ਨੂੰ ਕਿਵੇਂ ਅਜ਼ਮਾਉਣਾ ਹੈ

ਸਭ ਤੋਂ ਨਵਾਂ preview build ਪ੍ਰਾਪਤ ਕਰਨ ਅਤੇ /design command ਨੂੰ ਚਾਲੂ ਕਰਨ ਲਈ claude update ਚਲਾਓ।

ਮੁੱਖ ਗੱਲਾਂ

  • Integrated Prototyping: /design ਸਿੱਧਾ terminal prompts ਤੋਂ ਕਈ UI artboards ਤਿਆਰ ਕਰਦਾ ਹੈ।
  • Contextual Consistency: Claude ਮੌਜੂਦਾ codebase ਨੂੰ ਸਕੈਨ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ mockups ਮੌਜੂਦਾ design system ਦੇ ਅਨੁਸਾਰ ਰਹਿਣ।
  • Streamlined Workflow: Claude Design ਦੀ prompting ਸ਼ਕਤੀ ਨੂੰ Claude Code ਦੇ execution ਨਾਲ ਜੋੜ ਕੇ, developers ਬਿਨਾਂ ਕਿਸੇ tool ਨੂੰ ਬਦਲੇ concept ਤੋਂ visual prototype ਤੱਕ ਪਹੁੰਚ ਸਕਦੇ ਹਨ।

Anthropic ਦਾ ਨਵਾਂ /design command developers ਨੂੰ ਸਿੱਧਾ terminal ਤੋਂ UI mockups ਬਣਾਉਣ ਅਤੇ ਉਹਨਾਂ ਵਿੱਚ ਸੁਧਾਰ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ, ਜੋ design tools ਅਤੇ code editors ਦੇ ਵਿਚਕਾਰ ਵਾਰ-ਵਾਰ ਬਦਲਣ ਦੀ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਘਟਾਉਂਦਾ ਹੈ—ਇਹ ਇੱਕ ਅਜਿਹੀ ਰੁਕਾਵਟ ਹੈ ਜਿਸ ਨਾਲ ਕਈ ਤੇਜ਼ੀ ਨਾਲ ਕੰਮ ਕਰਨ ਵਾਲੀਆਂ ਟੀਮਾਂ ਅਜੇ ਵੀ ਜੂਝ ਰਹੀਆਂ ਹਨ।

CLI Prompt ਤੋਂ Visual Drafts ਤਿਆਰ ਕਰਨਾ

ਤੁਸੀਂ /design a few options for a login screen ਵਰਗਾ command ਟਾਈਪ ਕਰਦੇ ਹੋ ਅਤੇ Claude interactive artboards ਦਾ ਇੱਕ ਸਮੂਹ ਵਾਪਸ ਕਰਦਾ ਹੈ। ਹਰੇਕ artboard ਇੱਕ high-fidelity mockup ਦਿਖਾਉਂਦਾ ਹੈ ਜਿਸਦਾ ਤੁਸੀਂ ਨਿਰੀਖਣ ਕਰ ਸਕਦੇ ਹੋ, ਤੁਲਨਾ ਕਰ ਸਕਦੇ ਹੋ, ਅਤੇ ਅਗਲੇ ਸਵਾਲ ਪੁੱਛ ਕੇ ਸੁਧਾਰ ਕਰ ਸਕਦੇ ਹੋ।

Claude ਮੌਜੂਦਾ ਪ੍ਰੋਜੈਕਟ ਦੀਆਂ ਫਾਈਲਾਂ ਨੂੰ ਪੜ੍ਹਦਾ ਹੈ, colour palettes, component libraries, ਅਤੇ layout conventions ਕੱਢਦਾ ਹੈ, ਅਤੇ ਫਿਰ ਉਹਨਾਂ ਦੇ ਅਨੁਸਾਰ designs ਤਿਆਰ ਕਰਦਾ ਹੈ। ਆਉਟਪੁੱਟ “Artifacts” ਵਜੋਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ, ਜੋ ਇੱਕ ਅਜਿਹਾ view ਹੈ ਜੋ ਵੱਖਰੇ graphic editor ਨੂੰ ਖੋਲ੍ਹੇ ਬਿਨਾਂ ਤਸਵੀਰਾਂ ਦਿਖਾਉਂਦਾ ਹੈ। ਇਸ ਸਮੇਂ mockups ਸਿਰਫ਼ Claude ਦੇ workspace ਵਿੱਚ ਹੁੰਦੇ ਹਨ; ਉਹਨਾਂ ਨੂੰ code ਵਿੱਚ ਬਦਲਣ ਤੋਂ ਪਹਿਲਾਂ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਨੂੰ file system ਵਿੱਚ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਸੇਵ ਕਰਨਾ ਪਵੇਗਾ।

Developers Terminal ਵਿੱਚ Design Tool ਨੂੰ ਕਿਉਂ ਮਹੱਤਵ ਦਿੰਦੇ ਹਨ

ਜ਼ਿਆਦਾਤਰ developers ਆਪਣੇ ਦਿਨ ਦਾ ਇੱਕ ਵੱਡਾ ਹਿੱਸਾ code terminal ਅਤੇ UI design app ਦੇ ਵਿਚਕਾਰ ਬਦਲਣ ਵਿੱਚ ਬਿਤਾਉਂਦੇ ਹਨ। Visual prototyping ਨੂੰ ਉਸੇ ਵਿੰਡੋ ਵਿੱਚ ਲਿਆਉਣਾ ਜਿੱਥੇ code ਲਿਖਿਆ ਜਾਂਦਾ ਹੈ, software development life cycle ਦੇ ਦੋ ਪੜਾਵਾਂ ਨੂੰ ਇੱਕ ਵਿੱਚ ਜੋੜ ਦਿੰਦਾ ਹੈ।

ਤੇਜ਼ੀ 'ਤੇ ਧਿਆਨ ਦੇਣ ਵਾਲੀਆਂ ਟੀਮਾਂ ਲਈ, ਇੱਕ ਸਿੰਗਲ prompt ਨਾਲ ਕਈ layout options ਤਿਆਰ ਕਰਨਾ ਸ਼ੁਰੂਆਤੀ ਪੜਾਅ ਦੀ ਖੋਜ (discovery) ਨੂੰ ਤੇਜ਼ ਕਰ ਸਕਦਾ ਹੈ। Claude ਦੁਆਰਾ ਮੌਜੂਦਾ codebase ਨੂੰ ਪੜ੍ਹਨਾ mockups ਨੂੰ brand ਦੇ ਅਨੁਸਾਰ ਅਤੇ ਪ੍ਰੋਜੈਕਟ ਦੇ component system ਦੇ ਅਨੁਕੂਲ ਰੱਖਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਆਮ image-generation ਪੜਾਅ ਤੋਂ ਬਾਅਦ ਹੋਣ ਵਾਲੀ ਮੈਨੂਅਲ ਸਫਾਈ ਘਟ ਜਾਂਦੀ ਹੈ।

Anthropic ਇਸ ਵਾਧੇ ਨੂੰ ਇੱਕ “AI software engineer” ਵੱਲ ਇੱਕ ਕਦਮ ਵਜੋਂ ਪੇਸ਼ ਕਰਦਾ ਹੈ ਜੋ logic ਅਤੇ aesthetics ਦੋਵਾਂ ਨੂੰ ਸੰਭਾਲ ਸਕਦਾ ਹੈ। ਜੇਕਰ terminal ਹੁਣ ਇੱਕ multi-modal workspace ਵਜੋਂ ਕੰਮ ਕਰ ਸਕਦਾ ਹੈ, ਤਾਂ code ਲਿਖਣ ਅਤੇ user experience ਨੂੰ ਰੂਪ ਦੇਣ ਦੇ ਵਿਚਕਾਰ ਦਾ ਫਰਕ ਘੱਟ ਜਾਂਦਾ ਹੈ।

ਸੀਮਾਵਾਂ ਅਤੇ ਰਵਾਇਤੀ ਡਿਜ਼ਾਈਨ ਟੂਲਜ਼ ਦਾ ਪੱਖ

ਇਹ ਫੀਚਰ ਅਜੇ ਵੀ ਪ੍ਰੀਵਿਊ ਵਿੱਚ ਹੈ, ਅਤੇ ਕਈ ਵਿਵਹਾਰਕ ਸੀਮਾਵਾਂ ਬਾਕੀ ਹਨ। ਪਹਿਲਾਂ ਤਾਂ, ਤਿਆਰ ਕੀਤੇ ਗਏ ਮੌਕਅੱਪ ਆਪਣੇ ਆਪ ਸੋਰਸ ਫਾਈਲਾਂ ਨਹੀਂ ਬਣਦੇ; ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਉਹਨਾਂ ਨੂੰ ਮੈਨੂਅਲੀ ਐਕਸਪੋਰਟ ਅਤੇ ਇੰਟੀਗ੍ਰੇਟ ਕਰਨਾ ਪੈਂਦਾ ਹੈ। ਉਹ ਵਾਧੂ ਕਦਮ ਵੱਡੇ ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ ਸਮੇਂ ਦੀ ਬਚਤ ਨੂੰ ਘਟਾ ਸਕਦਾ ਹੈ ਜਿੱਥੇ ਦਰਜਨਾਂ ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਸਿੰਕ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

ਫੀਚਰ ਦੇ ਪਰਿਪੱਕ ਹੋਣ 'ਤੇ ਕੀ ਦੇਖਣਾ ਹੈ

Anthropic ਦੇ ਅਪਡੇਟ ਵਿੱਚ ਦੱਸਿਆ ਗਿਆ ਹੈ ਕਿ ਇਸ ਕਮਾਂਡ ਨੂੰ ਇੱਕ ਸਧਾਰਨ claude update ਨਾਲ ਚਾਲੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

ਮੁੱਖ ਨੁਕਤਾ: Claude Code ਦੇ ਟਰਮੀਨਲ ਦੇ ਅੰਦਰ ਇੱਕ ਡਿਜ਼ਾਈਨ ਪ੍ਰੋਂਪਟ ਨੂੰ ਇਨਬੈਡ ਕਰਨਾ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਕੰਸੈਪਟ ਤੋਂ ਵਿਜ਼ੂਅਲ ਪ੍ਰੋਟੋਟਾਈਪ ਤੱਕ ਇੱਕ ਸ਼ਾਰਟਕੱਟ ਦਿੰਦਾ ਹੈ, ਪਰ ਵਰਕਫਲੋ ਅਜੇ ਵੀ ਮੈਨੂਅਲ ਹੈਂਡ-ਆਫ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸ ਵਿੱਚ ਸਮਰਪਿਤ UI ਟੂਲਜ਼ ਵਰਗੀ ਡੂੰਘਾਈ ਦੀ ਕਮੀ ਹੈ। ਇਸਦਾ ਵਿਕਾਸ ਇਹ ਤੈਅ ਕਰੇਗਾ ਕਿ ਇਹ ਕਮਾਂਡ ਇੱਕ ਸੀਮਤ ਸਹੂਲਤ ਬਣ ਕੇ ਰਹੇਗੀ ਜਾਂ AI-ਡਰਾਈਵਨ ਡਿਵੈਲਪਮੈਂਟ ਸਟੈਕ ਦਾ ਇੱਕ ਮੁੱਖ ਹਿੱਸਾ ਬਣ ਜਾਵੇਗੀ।