83.3K+다운로드
엔터프라이즈 제품 디자인 · 신규 리소스

Dell 디자인 시스템.

DDS v3로 범위가 지정된 기기 검색을 구현하세요. 시맨틱 색상, 반응형 타이포그래피 단계, 토큰 간격을 사용하고, 필터링 동작은 애플리케이션이 담당하는 InputGroup 구성을 적용합니다.

OpenDesign 다운로드 DESIGN.md 다운로드
OpenDesign 가이드9개 챕터참조 항목 38개독자적 적용 가이드
01

Dell 디자인 시스템 인터페이스 미리보기

로컬 검색어를 제출하고 결과 하나를 확인한 다음 초기화를 눌러 목록을 복원하세요.

기기 목록 검색전체 예시 열기
DDS v3의 간격, 글자체, 문서화된 밝은 테마 입력 색상을 독립적으로 HTML/CSS에 해석했으며 시스템 대체 글꼴을 사용합니다. · 구현 레퍼런스
02

Dell 디자인 시스템 디자인 참조

DDS v3 기초 자료와 검증된 Vanilla 3.2.0 Storybook. 색상 값은 Text Input 토큰 표에 명시된 밝은 모드 미리보기용이며 모든 테마에 적용되는 값은 아닙니다. 미리보기는 독립적인 HTML/CSS에서 이 규칙을 사용하고, 코드 예제는 버전이 지정된 DDS CDN을 불러옵니다.

간격

출처
이름 / 규칙값 / 구성용도
--dds-spacing-xs4px / 0.25rem아이콘과 레이블 사이의 간격.
--dds-spacing-sm8px / 0.5rem나란히 배치된 검색 작업.
--dds-spacing-md12px / 0.75rem간결한 개체 행.
--dds-spacing-lg16px / 1rem결과 콘텐츠의 패딩.
--dds-spacing-xl24px / 1.5rem검색과 결과 사이의 간격.
--dds-spacing-2xl32px / 2rem메인 페이지의 안쪽 여백.
--dds-spacing-3xl40px / 2.5rem섹션 간격.
--dds-spacing-4xl48px / 3rem주요 섹션 경계.
--dds-spacing-5xl64px / 4rem넓은 레이아웃 간격.
--dds-spacing-6xl80px / 5rem여유 있는 구성.
--dds-spacing-7xl96px / 6rem목록에서 가장 큰 간격 단계.

밝은 모드 시맨틱 색상 예시

출처
이름 / 규칙값 / 구성용도
--dds-color-text-primary#1D2C3B 주요 결과 레이블.
--dds-color-background-surface-secondary#EBF1F6 보조 콘텐츠 표면.
--dds-color-border-brand-base#00468B 브랜드 입력 테두리.
--dds-color-background-surface-inactive#E1E1E1 비활성 필드 표면.
--dds-color-border-inactive-base#7E7E7E 비활성 경계선.
--dds-color-text-inactive#B6B6B6 비활성 레이블이며 본문 텍스트가 아닙니다.

타이포그래피 단계에서 선택한 역할

출처
이름 / 규칙값 / 구성용도
Display 1 ≥1024px72px / 88px; weight 300촘촘한 결과 목록이 아닌 큰 편집용 제목.
Heading 1 ≥1024px48px / 56px; weight 300큰 페이지 제목.
Heading 1 <1024px40px / 48px; weight 300간결한 페이지 제목.
Heading 4 ≥1024px24px / 32px; weight 400섹션 제목.
Heading 4 <1024px20px / 28px; weight 400간결한 섹션 제목.
Body 216px / 24px; weight 400기본 문단 역할.
Body 314px / 20px; weight 400밀도 높은 메타데이터.
Caption12px / 20px; weight 400필드 안내 콘텐츠.
Button 116px / 24px; weight 500기본 작업 레이블.

검색 구성

출처
이름 / 규칙값 / 구성용도
InputGroup(element)Initializer exported by @dds/components그룹 래퍼가 생성된 뒤 초기화하세요.
dds__input-groupInput and addon wrapper입력 앞뒤의 슬롯을 입력창에 인접하게 유지하세요.
dds__text-inputNative input class검색어와 결과는 애플리케이션에서 관리합니다.
dds__input-addonAccessory wrapper장식용 선행 아이콘 또는 명확한 동작.
dds__button--ghostLow-emphasis button modifier검색/지우기 예시에서 이 변형을 사용합니다.
dds__button--icon-onlyIcon-only button modifier버튼에 aria-label을 지정해야 합니다.

스타일 로드

출처
이름 / 규칙값 / 구성용도
dds-styles.cssAll-in-one starter컴포넌트 스타일, 토큰, 글꼴 및 헬퍼 번들이 포함됩니다.
dds-tokens.cssGlobal and semantic tokens컴포넌트 토큰은 포함되지 않습니다.
dds-components.cssAll component styles and component tokens번들을 분리하는 방식을 사용할 때 토큰 및 글꼴과 함께 필요합니다.
dds-fonts.cssCDN font definitionsDDS 글꼴 렌더링에 포함합니다.
dds-grid.cssGrid classes별도의 레이아웃 번들입니다.
dds-icons.cssIcon classes이 파일만으로는 아이콘 글꼴을 가져오지 않습니다. 아이콘 설정을 참고하세요.
03

Dell 디자인 시스템 전체 가이드

실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드.

DESIGN-dell.md

완전한 안내와 구현 시작점, 소스 링크.

가이드 다운로드

Dell 디자인 시스템 DDS v3와 구현 범위

검색 서비스가 아닌 조합

DDS는 재사용 가능한 시각적 기반과 제품 동작을 분리합니다. 이 기기 목록에 유용한 통합 지점은 부가 요소 슬롯이 있는 기본 입력 필드인 InputGroup입니다. 호출할 Search 생성자는 없으며, 디자인 시스템이 기기를 가져오지도 않습니다. 애플리케이션에서는 입력 중인 값, 적용된 검색어, 선택한 기기를 서로 다른 값으로 관리합니다. 이렇게 하면 입력과 제출의 차이가 명확해집니다.

이 OpenDesign 가이드에서

지원 사양 읽기

하나의 버전 선택

아래의 공개 개발자 예시는 Vanilla 3.2.0을 대상으로 합니다. CSS 및 JavaScript도 같은 버전을 사용합니다. 기존 v2 통합은 패키징 방식이 다르므로, 이 가져오기를 적용하기 전에 마이그레이션 문서를 따라야 합니다. 현재 패키지는 Dell 내부용입니다. 문서에 안내된 CDN을 사용하면 공개 npm 레지스트리가 있다고 가정하지 않고도 이 조합을 구체적으로 평가할 수 있습니다.

지원 사양 읽기

Dell 디자인 시스템 의미론적 표면과 경계

문서에 명시된 역할 이름 사용

참조 표에는 공식 컴포넌트 문서에 나온 라이트 모드 입력 값이 정리되어 있습니다. 제품 코드에서는 DDS 스타일을 불러온 후 의미론적 CSS 변수를 사용해야 합니다. 기본 텍스트와 보조 표면은 가독성 있는 결과 영역을 구성하고, 브랜드 테두리는 입력 필드의 경계를 표시합니다. 비활성 전경색은 의도적으로 흐리게 표현한 색이므로 기본 메타데이터 색상으로 사용하면 안 됩니다.

지원 사양 읽기

DDS 토큰을 재정의하지 마세요

전역 색상 기본 요소는 의미론적 역할을 구성하며, 이러한 역할은 컴포넌트별 결정의 기반이 됩니다. 애플리케이션 작성자는 전역 색상 단계 대신 의미론적 역할을 참조해야 합니다. 다크 화면을 지원하려면 실제로 지원되는 토큰 모드를 사용해야 합니다. 페이지 배경만 바꾸면 필드, 레이블, 포커스 색상이 일관되지 않습니다. 로컬 예시는 라이트 모드로 유지합니다.

지원 사양 읽기

Dell 디자인 시스템 문서 구조를 바꾸지 않는 반응형 타이포그래피

의미상 제목 하나, 시각적 크기 두 가지

화면 크기와 관계없이 페이지 제목은 h1으로 유지합니다. 문서에 명시된 Heading 1 크기인 넓은 화면의 48/56과 1024px 미만 화면의 40/48을 사용합니다. 이 예시는 독립적인 로컬 구현이므로 시스템 대체 글꼴을 사용하며, 기본 스타일시트는 DDS 글꼴 리소스를 제공합니다. 설명에는 Body 2를, 간결한 기기 메타데이터에는 Body 3을 사용합니다.

지원 사양 읽기

실제 이름이 들어갈 공간을 확보하세요

기기 모델명, 사무실 이름 또는 지원 상태는 여러 줄로 표시될 수 있습니다. 식별자를 읽기 쉽게 유지하고 자산 태그의 유일한 표기를 잘라내지 마세요. 좁은 화면에서는 시각적 계층 구조와 열 배치를 조정하되, 레이블과 값의 연결 관계는 유지합니다.

지원 사양 읽기

Dell 디자인 시스템 분할 보기를 위한 4픽셀 간격 체계

간격 단계로 요소 간 관계를 나타내세요

연관된 동작 사이에는 sm, 결과 행 안에는 lg, 검색어 영역과 결과 영역 사이에는 xl을 사용합니다. 넓은 화면에서는 바깥 컨테이너에 2xl을 사용할 수 있습니다. 이는 문서에 명시된 간격 체계를 애플리케이션에 적용한 예이며, 모든 검색 페이지에 이와 똑같은 여백이 필요하다는 공식 지침은 아닙니다.

지원 사양 읽기

밀도와 재배치

  • 모든 화면 너비에서 검색 레이블과 도움말을 필드 위에 둡니다.
  • 행 안에 들어가지 않으면 제출 동작을 필드 아래로 옮깁니다.
  • 가로 스크롤이 생기지 않도록 선택한 기기의 세부 정보를 결과 아래로 옮깁니다.

지원 사양 읽기

Dell 디자인 시스템 입력값, 적용된 검색어, 선택 상태

예시의 상태 전환

지우기를 실행하면 입력값과 적용된 필터가 모두 초기화되고, 샘플 기기 전체 목록이 복원되며, 필드로 포커스가 돌아갑니다. 선택은 별도의 버튼 동작입니다. 검색어는 바꾸지 않고 자산 세부 정보를 표시합니다. 결과가 없으면 적용된 검색어와 명시적인 초기화 방법을 보여 줍니다. 원격 기기 목록을 검색했다고 표시하지 않습니다.

  1. 자산 이름이나 태그를 입력하세요. 제출할 때까지 현재 결과가 유지됩니다.
  2. 양식을 제출하고 필터링된 로컬 배열을 기준으로 결과 수를 업데이트합니다.
  3. 결과를 확인하거나 검색어를 지우세요. 동작을 시작한 컨트롤에 포커스를 유지합니다.

지원 사양 읽기

Dell 디자인 시스템 레이블, 랜드마크, 알림

검색 범위를 명확히 전달하세요

양식은 Device inventory라는 이름의 검색 랜드마크입니다. 입력 중에도 고정 레이블과 도움말 텍스트를 계속 표시합니다. 지우기 아이콘은 클릭 핸들러가 연결된 span이 아니라 aria-label이 지정된 버튼입니다. 장식용 기호는 보조 기술에서 숨깁니다. 결과 수는 정중한 상태 메시지로 제공하며, 입력할 때마다 알리는 대신 제출 후에 변경합니다.

지원 사양 읽기

선택은 페이지 이동이 아닙니다

각 결과는 눌림 상태와 전체 접근성 이름이 있는 실제 버튼입니다. 세부 정보 제목은 검사 중인 항목을 식별합니다. 이 예시에는 관리 백엔드가 없으므로 기기 관리 페이지를 여는 것처럼 보이는 링크는 없습니다. 현재 선택 항목은 테두리와 텍스트 레이블로 표시됩니다.

지원 사양 읽기

Dell 디자인 시스템 실제 에셋을 불러오고 그룹을 초기화하세요

문서에 명시된 번들부터 시작하세요

승인된 내부 애플리케이션에서는 Dell Artifactory에서 @dds/components를 설치하고 프로젝트 스타일시트 파이프라인을 통해 dds-styles.css를 가져오세요. 독립형 개념 증명에는 아래에 표시된 버전 고정 공개 CDN 링크를 사용하세요. 마크업이 생성된 다음 InputGroup을 초기화하세요. 제출, 지우기, 필터링을 위한 이벤트 핸들러는 애플리케이션 코드로 구현해야 합니다.

지원 사양 읽기

구성이 작동한 후 최적화하세요

지원 사양 읽기

Dell 디자인 시스템 검색 동작을 테스트하세요

유용한 로컬 테스트

제출하지 않은 상태로 Latitude를 입력하고 이전 결과 개수가 유지되는지 확인하세요. 제출한 다음 일치하는 기기를 확인합니다. 없는 태그를 검색해 빈 상태를 확인한 뒤, 검색을 지우고 샘플 기기가 모두 다시 표시되는지 확인하세요. 키보드 입력과 좁은 화면에서도 반복합니다. 이러한 검사는 이 예시의 동작을 확인할 뿐, 이를 기반으로 하는 Dell 제품이나 네트워크 통합을 인증하지 않습니다.

지원 사양 읽기

Dell 디자인 시스템 컴포넌트 예시

완전한 독립형 인터랙티브 예제

문서 전체를 index.html로 저장한 다음 브라우저에서 엽니다. 독립적으로 구현한 HTML/CSS 해석을 바탕으로 DDS v3의 간격과 타이포그래피, 문서화된 라이트 모드 입력 색상을 적용했으며 시스템 대체 글꼴을 사용합니다.

html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Device inventory — DDS v3 study</title><style>*{box-sizing:border-box}body{margin:0;font:16px/24px Arial,sans-serif;color:#1d2c3b;background:white}header{padding:16px 32px;border-bottom:1px solid #c5d4e3;color:#00468b}main{padding:32px;max-width:1200px;margin:auto}h1{font-size:48px;line-height:56px;font-weight:300;margin:16px 0}h2{font-size:24px;line-height:32px;font-weight:400}label{display:block;font-weight:bold;margin-bottom:8px}.search{display:flex;gap:8px;align-items:stretch}.input{border:1px solid #00468b;display:flex;align-items:center;flex:1;min-width:0}.input span{padding:8px 12px}input{border:0;padding:12px 0;width:100%;min-width:0;font:inherit;background:transparent;color:inherit}button{font:inherit;cursor:pointer;padding:8px 16px;background:white;color:#00468b;border:1px solid #00468b}button:hover{background:#ebf1f6}button:focus-visible,input:focus-visible{outline:3px solid #00468b;outline-offset:3px}.input button{border:0}.submit{background:#00468b;color:white}.submit:hover{background:#003567}.helper{font-size:14px;line-height:20px;color:#516478}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;margin-top:24px}.result{display:flex;text-align:left;align-items:center;gap:16px;width:100%;padding:16px;margin-bottom:12px;border:1px solid #c5d4e3;color:#1d2c3b}.result[aria-pressed=true]{border:2px solid #00468b;padding:15px;background:#ebf1f6}.result strong{display:block}.result small{display:block;font-size:14px}.device{width:64px;height:40px;border:3px solid #516478;border-radius:3px;background:linear-gradient(140deg,#dcebf6,#86afce);position:relative;flex-shrink:0}.device:after{content:'';position:absolute;bottom:-8px;left:-7px;right:-7px;height:4px;background:#516478;border-radius:0 0 4px 4px}.device.desktop{width:28px;height:48px;background:#c5d4e3;margin:0 18px}.device.desktop:after{display:none}aside{background:#ebf1f6;padding:24px;align-self:start}aside h2{margin-top:0}dt{font-size:12px;color:#516478;margin-top:16px}dd{margin:4px 0 0}footer{padding:16px 32px;border-top:1px solid #c5d4e3;font-size:12px;line-height:20px;color:#516478}#empty{padding:24px;background:#ebf1f6}#count{font-size:14px;margin:24px 0 0}@media(max-width:1023px){h1{font-size:40px;line-height:48px}}@media(max-width:650px){main{padding:16px}.layout{grid-template-columns:1fr}.search{flex-wrap:wrap}.input{flex-basis:100%}.submit{width:100%}header,footer{padding:16px}}</style><header>DEVICE OPERATIONS <span style="float:right;font-size:12px">Local sample inventory</span></header><main><h1>Find a device</h1><p>Review model, location and support coverage in one place.</p><form role="search" aria-label="Device inventory" id="form"><label for="query">Search devices</label><p class="helper" id="help">Enter a model or asset tag. Results change after you submit.</p><div class="search"><div class="input"><span aria-hidden="true">⌕</span><input id="query" type="search" aria-describedby="help"><button type="button" id="clear" hidden aria-label="Clear device search">Clear</button></div><button class="submit" type="submit">Search devices</button></div></form><p id="count" role="status"></p><div class="layout"><section aria-label="Matching devices"><div id="results"></div><div id="empty" hidden>No devices match this query. Clear the search to view the sample inventory.</div></section><aside aria-label="Device details"><span class="helper">SELECTED DEVICE</span><h2 id="name"></h2><dl><dt>Asset tag</dt><dd id="tag"></dd><dt>Location</dt><dd id="location"></dd><dt>Support coverage</dt><dd id="coverage"></dd><dt>Record source</dt><dd>Local demonstration data</dd></dl></aside></div></main><footer>Independent HTML/CSS interpretation of DDS v3. Published light-mode colors, spacing and type sizes; system fallback font. No Dell services are connected.</footer><script>
const devices=[{name:'Latitude 7450',tag:'LT-104',location:'London · Design studio',coverage:'Through 30 June 2027',kind:'laptop'},{name:'Precision 5680',tag:'PR-208',location:'Berlin · Engineering lab',coverage:'Through 15 March 2028',kind:'laptop'},{name:'OptiPlex 7020',tag:'OP-316',location:'Amsterdam · Front desk',coverage:'Through 20 August 2027',kind:'desktop'}];let selected=devices[0],applied='';const $=id=>document.getElementById(id);function render(){const matches=devices.filter(d=>(d.name+' '+d.tag).toLowerCase().includes(applied.toLowerCase()));$('count').textContent=matches.length+' matching device'+(matches.length===1?'':'s')+(applied?' for “'+applied+'”':'');$('results').replaceChildren();$('empty').hidden=matches.length>0;for(const d of matches){const b=document.createElement('button');b.className='result';b.setAttribute('aria-pressed',String(d===selected));const pic=document.createElement('span');pic.className='device '+d.kind;pic.setAttribute('aria-hidden','true');const label=document.createElement('span'),strong=document.createElement('strong'),small=document.createElement('small');strong.textContent=d.name;small.textContent=d.tag+' · '+d.location.split(' · ')[0];label.append(strong,small);b.append(pic,label);b.onclick=()=>{selected=d;render()};$('results').append(b)}for(const key of ['name','tag','location','coverage'])$(key).textContent=selected[key]}
$('form').onsubmit=e=>{e.preventDefault();applied=$('query').value.trim();render()};$('query').oninput=()=>{$('clear').hidden=!$('query').value};$('clear').onclick=()=>{$('query').value='';applied='';$('clear').hidden=true;render();$('query').focus()};render();
</script></html>

코드 참조

  • 이 문서에는 자체 검색 동작이 포함되어 있습니다. InputGroup 초기화가 버전 고정 스타일시트와 스크립트에 맞게 작동하는지 확인하려면 기본 DDS 예시를 사용하세요.

전체 네이티브 구현 엔트리

셋업의 전체 구현을 집중적인 API 설명과 함께 여기에 모았습니다. 셋업에 문서화된 패키지 및 빌드 전제 조건을 따르세요.

html
<!doctype html>
<html lang="en"><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" crossorigin href="https://dds.dell.com/components/3.2.0/css/dds-styles.css">
<title>Local device search</title>
<main style="padding:24px;max-width:720px;margin:auto">
<h1>Find a device</h1>
<form role="search" aria-label="Device inventory" id="search-form">
<label for="query">Search devices</label>
<p id="help">Enter a model or asset tag, then submit.</p>
<div class="dds__input-group" id="device-search">
<div class="dds__input-addon" aria-hidden="true">⌕</div>
<input id="query" class="dds__text-input" type="search" aria-describedby="help">
<div class="dds__input-addon"><button class="dds__button dds__button--ghost dds__button--xs" type="button" id="clear" hidden aria-label="Clear device search">Clear</button></div>
</div>
<button class="dds__button dds__button--ghost dds__button--md" type="submit">Search devices</button>
</form>
<p id="count" role="status"></p><ul id="results"></ul>
</main>
<script type="module">
import { InputGroup } from 'https://dds.dell.com/components/3.2.0/js/index.mjs';
InputGroup(document.querySelector('#device-search'));
const inventory=['Latitude 7450 · LT-104','Precision 5680 · PR-208','OptiPlex 7020 · OP-316'];
const input=document.querySelector('#query'), clear=document.querySelector('#clear');
function render(query='') {
 const matches=inventory.filter(x=>x.toLowerCase().includes(query.toLowerCase()));
 document.querySelector('#results').replaceChildren(...matches.map(text=>{const li=document.createElement('li');li.textContent=text;return li}));
 document.querySelector('#count').textContent=matches.length+' matching devices';
}
input.addEventListener('input',()=>{clear.hidden=!input.value.length});
document.querySelector('#search-form').addEventListener('submit',event=>{event.preventDefault();render(input.value.trim())});
clear.addEventListener('click',()=>{input.value='';clear.hidden=true;render();input.focus()});
render();
</script></html>

코드 참조

  • index.html로 저장한 뒤 문서화된 DDS 3.2.0 CDN에 네트워크로 연결된 상태에서 로컬 서버로 제공하세요. 실제 InputGroup 초기화와 로컬 필터링을 사용하며 Dell 백엔드는 사용하지 않습니다. 내부 npm 대안: npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . 삽입된 미리보기는 오프라인에서 HTML/CSS을 해석한 결과이며, 이 CDN 런타임이 아닙니다.

애플리케이션이 관리하는 검색과 InputGroup

이 설정은 기본 입력 요소와 추가 요소를 조합하고, InputGroup을 초기화한 뒤 실제 폼 제출을 연결합니다. 앞에 표시된 기호는 로컬 장식 문자이며, 아이콘 글꼴에 대한 의존성을 의미하지 않습니다.

자바스크립트
import { InputGroup } from '@dds/components';
InputGroup(document.querySelector('#device-search'));
// Use the complete form and event handlers in the setup example.

코드 참조

  • 검증된 v3 문서에는 독립형 Search API가 없습니다.
  • 아이콘만 있는 버튼에는 aria-label을 사용하고, 필터링은 애플리케이션에서 구현하세요.
04

Dell 디자인 시스템 에이전트 설정

구현 시작점

index.html로 저장한 뒤 문서화된 DDS 3.2.0 CDN에 네트워크로 연결된 상태에서 로컬 서버로 제공하세요. 실제 InputGroup 초기화와 로컬 필터링을 사용하며 Dell 백엔드는 사용하지 않습니다. 내부 npm 대안: npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . 삽입된 미리보기는 오프라인에서 HTML/CSS을 해석한 결과이며, 이 CDN 런타임이 아닙니다.

html
<!doctype html>
<html lang="en"><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" crossorigin href="https://dds.dell.com/components/3.2.0/css/dds-styles.css">
<title>Local device search</title>
<main style="padding:24px;max-width:720px;margin:auto">
<h1>Find a device</h1>
<form role="search" aria-label="Device inventory" id="search-form">
<label for="query">Search devices</label>
<p id="help">Enter a model or asset tag, then submit.</p>
<div class="dds__input-group" id="device-search">
<div class="dds__input-addon" aria-hidden="true">⌕</div>
<input id="query" class="dds__text-input" type="search" aria-describedby="help">
<div class="dds__input-addon"><button class="dds__button dds__button--ghost dds__button--xs" type="button" id="clear" hidden aria-label="Clear device search">Clear</button></div>
</div>
<button class="dds__button dds__button--ghost dds__button--md" type="submit">Search devices</button>
</form>
<p id="count" role="status"></p><ul id="results"></ul>
</main>
<script type="module">
import { InputGroup } from 'https://dds.dell.com/components/3.2.0/js/index.mjs';
InputGroup(document.querySelector('#device-search'));
const inventory=['Latitude 7450 · LT-104','Precision 5680 · PR-208','OptiPlex 7020 · OP-316'];
const input=document.querySelector('#query'), clear=document.querySelector('#clear');
function render(query='') {
 const matches=inventory.filter(x=>x.toLowerCase().includes(query.toLowerCase()));
 document.querySelector('#results').replaceChildren(...matches.map(text=>{const li=document.createElement('li');li.textContent=text;return li}));
 document.querySelector('#count').textContent=matches.length+' matching devices';
}
input.addEventListener('input',()=>{clear.hidden=!input.value.length});
document.querySelector('#search-form').addEventListener('submit',event=>{event.preventDefault();render(input.value.trim())});
clear.addEventListener('click',()=>{input.value='';clear.hidden=true;render();input.focus()});
render();
</script></html>

프로젝트를 위한 프롬프트

에이전트 프롬프트
완전한 DDS 3.2.0 InputGroup 구성으로 범위가 지정된 기기 인벤토리 검색을 구현하세요. 수동 제출, 눈에 보이는 범위 레이블, 로컬 결과 안내, 지우기 동작을 유지하세요. DDS 시맨틱 토큰과 반응형 타이포그래피를 사용하고, Search API를 임의로 만들거나 기존 v2 가져오기로 대체하지 마세요.
05

Dell 디자인 시스템 출처 및 범위

독립적인 DDS v3 참조 자료입니다. 내부 패키지를 사용하려면 Dell 레지스트리에 접근해야 하며, 프로토타입 제작에는 공개 버전 지정 CDN이 문서화되어 있습니다. Dell의 제휴, 에셋 관리 연결 또는 공식 인증을 의미하지 않습니다.